Css 如何为多行文本的每一行显示图像？

考虑一个

元素，该元素包含不同高度的可变数量的元素，这些元素可以覆盖多行。是否有一种方法可以为文本的每一行显示特定的图像？ :

HTML:

目标是为每行书显示一个书架。为了使代码易于阅读，book元素是通过JS生成的，但是我不希望使用JS来创建shelf元素，而只使用CSS

我尝试的是：

• 生成书籍元素时，为每行创建一个子元素，包含一组书籍+其末尾的书架图像：它不起作用，因为我需要知道每行将有多少本书（因为我希望书架占据所有页面宽度），而我事先不知道

• background repeat

  属性，搁板图像垂直重复：它不起作用，因为我事先不知道每行的高度
• JavaScript解决方案，当一行不能容纳更多的书时，我会检测，并在此时添加书架图像：这将是我的最后手段：我想要一个纯CSS解决方案

---

有没有办法做到这一点？

您现在配置它的方式显然不起作用。这是因为您目前无法在页面上划分书籍。从这个意义上说，你只有一个架子

<div class="bookCase">
<span class="book">
.
.
.
<div class="shelf"></div>
</div>

看了你的代码之后，我会假设跨度就是书，现在我建议在你的js中，您可以创建一个

div.row

用这些书籍填充它，然后将该行推到

div.shelf

您可以使用文档宽度计算您可以添加多少跨距，您可以将背景添加到每个

div.row

您可以直接将代码添加到问题中吗？这样，如果JSFIDLE变得不可用，将来还会有人理解您的问题。@ecg8谢谢，完成了，谢谢。根据你的建议，在每本书下面加一个边框，并稍微摆弄一下边框图像，我可以产生一个不错的效果（），但是，由于每本书的背景都是重复的，所以并不能完全创建一个很好的书架渲染效果

var bookNumber = 300;
for (var i =0; i<bookNumber;i++) {
    $('#bookcase').prepend($('<span>').css({
    width: (5+20*Math.random()*Math.random()) + 'px',
    height: (300*Math.random()*Math.random()) + 'px'
  }).addClass('book'));
}

.book {
  border: 1px solid black;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.shelf {
  width: 100%;
  height: 20px;
  background-image: url("http://sr.photos3.fotosearch.com/bthumb/CSP/CSP994/k15715591.jpg");
}

<div class="bookCase">
<span class="book">
.
.
.
<div class="shelf"></div>
</div>