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

问题描述

考虑一个<div>包含可变数量的不同高度的元素的元素，这些元素可以覆盖几行。有没有办法为这个文本的每一行显示一个特定的图像？看这个例子：

HTML：

<div id="bookcase">
  <div class="shelf">

  </div>
</div>

JS：

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'));
}

CSS：

.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");
}

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

我尝试了什么：

生成书籍元素时，为每一行创建一个<div>子元素，其中包含一组书籍+书架图像：它不起作用，因为我需要知道每行将有多少本书（因为我想要书柜占据所有页面宽度），我事先并不知道。
background-repeat货架图像垂直重复的属性：它不起作用，因为我事先不知道每一行的高度。
JavaScript 解决方案，我检测一行何时不能容纳更多书籍，并在此时添加一个书架图像：这将是我最后的手段：我想要一个纯 CSS 解决方案。

有没有办法做到这一点？

标签： css

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

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

您可以为每本书添加一个厚底边框（20px 左右），以制作类似这样的伪书架。

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;
  border-bottom: 20px solid black;
  display: inline-block;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bookcase"></div>

就个人而言，我会选择你最后的手段，并在窗口中添加一个“调整大小”侦听器，以便在包含元素改变大小时动态地重新构建你的架子。

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

问题描述

解决方案

推荐阅读