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

【问题标题】：How to display text under background image?如何在背景图片下显示文字？
【发布时间】：2012-05-24 00:49:12
【问题描述】：

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

下面我有一个我希望布局的示例。感谢您的帮助。

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

我没有 ASCII 艺术技能，但希望你能明白。

【问题讨论】：

抱歉，我很笨，不知道你的要求是什么，在 jsfiddle jsfiddle.net 上显示你的 html，所以也许我可以得到一个更好的主意

标签： html css layout

【解决方案1】：

将文本设置在一个带有margin-top 等于背景图像高度的范围内。跨度需要为 display: block 才能正常工作。或者，更好的是，只需将padding-top 设置为等于背景图像的高度，使用background-image-repeat: no-repeat。

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

【讨论】：

您可以通过对 li 应用填充来完成此操作而无需额外的标记

【解决方案2】：

我假设您将高度设置为固定大小。如果是这种情况，您可以将padding-top 设置为与图像的高度相同，并且只要background-repeat 是no-repeat，您应该会在下面看到您的评论。

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

【讨论】：

【解决方案3】：

增加 div 的高度以适应文本和背景。将背景设置为不重复并为文本提供 padding-top。

【讨论】：

什么div？它是li 元素。除非您设置 display:block;，否则它不适用于 li

【解决方案4】：

你可以为你的 li 元素指定一个固定的高度。高度将是“正在使用的背景图像的高度”+“在它下面的文本所需的高度”。然后在 li 元素的顶部应用与背景图像高度相等的填充。

假设背景图片的高度是 14px，假设它下面的文字是 12px。那么，

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

【讨论】：

【解决方案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 的填充（将其更改为您的 li 背景高度或更高）将“偶数”更改为“奇数”以使每个奇数对齐。希望你能明白我的意思:)

【讨论】：

有更简单的方法来完成此任务，而无需添加额外的 li 元素并弄乱 html。
但任务是用所有的 li 元素来解决它。他从不要求更好的html。那么为什么要投反对票呢？
这是一个简单问题的过于复杂的解决方案。
正如我所说，他要了所有的元素，谁知道他想做什么，也许他需要所有的li。对于他的问题，这是正确的答案。