Question

我正在创建一个网站，其中我有三个<li>全部浮动到左侧，每个网站都有一个特定图像的背景。我在每个<li>中都有文字，我想移动该文本，以便它显示在背景下而不是它上面。这种布局的css会是什么？

下面我有一个我想要布局的例子。谢谢你的帮助。

====== ====== ======
  | | | | | |
  | | | | | |
  ====== ====== ======
   文字文字

我没有ASCII艺术技巧，但希望你能得到这个想法。

Answer 1

在范围内设置margin-top等于背景图像高度的文本。为此，范围需要display: block才能生效。或者，更好的是，只需将padding-top设置为等于背景图片的高度background-image-repeat: no-repeat。

有关工作示例，请参阅http://jsfiddle.net/77NdE/。

Answer 2

我假设您将高度设置为固定大小。如果是这种情况，您可以将padding-top设置为与图片的高度相同，只要background-repeat为no-repeat，您就会在下方看到自己的评论。< / p>

示例：http://jsfiddle.net/qTB8E/

Answer 3

增加div的高度以适应文本和背景。将背景设置为不重复，并为文本提供填充顶部。

Answer 4

您可以为li元素指定固定高度。高度将是“正在使用的背景图像的高度”+“低于它的文本所需的高度”。然后在顶部为li元素应用填充，该元素等于背景图像的高度。

假设背景图像的高度为14像素，并假设其下的文本为12像素。然后，

li
{
height: 26px; /* 14 + 12 */
background-image: url(path/to/image);
background-position: top;
background-repeat: no-repeat; /* you can even repeat x if required */
padding-top: 14px;
}

Answer 5

尝试使用伪类

<ul>
<li id="background"></li>
<li>Text</li>
<li id="background"></li>
<li>Text</li>
<li id="background"></li>
<li>Text</li>
</ul>

CSS

ul {}
ul li:nth-child(even) {padding-top:20px}

所以每秒（每个偶数）li元素将从顶部填充20px（将其更改为你的背景高度或更高）将“even”更改为“odd”以使每个奇数对齐。希望你能说出我的意思:)）

如何在背景图片下显示文字？

5 个答案: