跨多个元素的连续背景图案

Question

我需要在多个元素上创建一个连续的背景图案。我无法控制这些元素的高度或数量。
以下是一个示例：

p{
  margin:0;
  padding:1.5em;
}
.bg{
  background-image:url('http://enjoycss.com/webshots/hB_1.png');
}

<p>some text<br>on several lines</p>
<p class="bg">some text<br>on several lines</p>
<p class="bg">some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>
<p class="bg">some text<br>on several lines<br><br>and another</p>
<p>some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>
<p class="bg">some text<br>on several lines</p>
<p class="bg">some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>
<p class="bg">some text<br>on several lines<br><br>and another</p>

我想要的效果几乎可以通过 background-attachement:fixed; 实现，但我需要背景随着内容滚动。
示例：

p{
  margin:0;
  padding:1.5em;
}
.bg{
  background-image:url('http://enjoycss.com/webshots/hB_1.png');
  background-attachment:fixed;
}

<p>some text<br>on several lines</p>
<p class="bg">some text<br>on several lines</p>
<p class="bg">some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>
<p class="bg">some text<br>on several lines<br><br>and another</p>
<p>some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>
<p class="bg">some text<br>on several lines</p>
<p class="bg">some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>
<p class="bg">some text<br>on several lines<br><br>and another</p>

- web-tiki

---

你不能只是用一个 div 把它们包起来，然后在这个 div 上分配背景吗？ - Nicklas Nygren

@NicklasNygren 不，该内容是由所见即所得编辑器生成的，客户端无法创建容器，他只能更改 p 元素的类。 - web-tiki

Answer 1

Javascript

只需使用少量的JavaScript代码，便可获得您所需的效果。

此方法获取当前高度并将所有先前的高度相加，以给元素其起始背景位置。

var lastHeight = 0;
$('.bg').each(function() {
  $(this).css('background-position', '0 -' + lastHeight + 'px');
  var currentHeight = $(this).outerHeight();
  var newPosition = currentHeight + lastHeight;
  lastHeight = lastHeight + currentHeight;
});

p {
  margin: 0;
  padding: 1.5em;
}
.bg {
  background-image: url('http://enjoycss.com/webshots/hB_1.png');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>some text<br>on several lines</p>
<p class="bg">some text<br>on several lines</p>
<p class="bg">some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>
<p class="bg">some text<br>on several lines<br><br>and another</p>
<p>some text<br>on several lines<br><br>and another<br>some 
<p class="bg">some text<br>on several lines</p>
<p class="bg">some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>
<p class="bg">some text<br>on several lines<br><br>and another</p>
<p>some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>

- Stewartside

Answer 2

您可以让段落的最小高度/行高与背景图片大小协调一致:

p {
  margin: 0;
  line-height: 1em;
  background-image: url('http://i.imgur.com/TbQPryV.png');
  background-size: 1em 1em;
  min-height: 1em;
  outline: 1px dashed rgba(0,0,0,0.3);  
}

<p>some text<br>on several lines<br><br>and another</p>
<p>some text<br>on several lines</p>
<p>some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>
<p>some text<br>on several lines<br><br>and another</p>
<p>some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>

- L777

---

好的方法，但不幸的是我的背景图案比行高要高。 - web-tiki

Answer 3

我已经完成了没有使用 background:fixed。请检查并告诉我它是否对您有用？

演示

如果我没有理解您的任何观点，请告诉我。

- Sunil Gehlot

---

谢谢您的回答，但正如我所评论的那样，我无法将元素包装在容器中以添加背景。 - web-tiki