多个元素上的连续背景图像图案

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>

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>

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>

Answer 3

没有background:fixed，我已经完成了。请检查并让我知道它对你有用吗？？？

Demo

如果我不明白你的意思，请告诉我。