【问题标题】: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-repeatno-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。对于他的问题,这是正确的答案。
      猜你喜欢
      • 1970-01-01
      • 2014-09-30
      • 2013-08-16
      • 2020-09-11
      相关资源
      最近更新 更多