如何使用 CSS 在文本上方放置背景图像？答案

【问题标题】：How do I place a background-image ABOVE text using CSS?如何使用 CSS 在文本上方放置背景图像？
【发布时间】：2010-11-19 18:01:50
【问题描述】：

我试图让我的 HTML 非常简单。我有一个集合列表，其中声明了一个向导的名称，例如一组步骤...

<div>
    <ul class="wizardBar">
        <li class="step1">Step One</div>
        <li class="step2">Step Two</div>
        <li class="step3">Step Three</div>
    </ul>
</div>

我的 CSS 文件中有以下内容来格式化它...

.wizardbar
{
  display:table;           
  padding:0;
  margin:0;
  white-space:wrap;
  list-style-type:none;
}
* html .wizardbar {
  display:inline-block;
  width:1px;
  padding:0 2px;
}
.wizardbar li
{
  display:table-cell;
  width: 116px;
  text-align: center;
  padding-top: 36px;
}
.step1
{
  background: url('Step1.gif') no-repeat;
}
.step2
{
  background: url('Step2.gif') no-repeat;
}
.step3
{
  background: url('Step3.gif') no-repeat;
}

我在这里想要完成的是......

Step1.gif.....Step2.gif.....Step3.gif
.第 1 步........第 2 步........第 3 步

步骤名称（即：“STEP 1”）显示在该步骤的图像下方。当前，文本位于图像之上。我不希望有任何重叠。

谢谢，贾斯汀

【问题讨论】：

标签： html css background-image

【解决方案1】：

将此添加到您的 css 文件中：

.div.wizardBar li {
padding-top: 50px;
}

摆弄填充顶部，直到获得所需的正确距离。

【讨论】：

【解决方案2】：

我会看看 background-position CSS 属性，可能与调整元素大小一起使用。

http://www.w3schools.com/css/pr_background-position.asp 了解更多。

【讨论】：

【解决方案3】：

鉴于您正在详细说明一个进程，一个固有的有序结构，我强烈建议使用ol 代替ul。也就是说，以下内容应该可以实现您的目标，尽管不像我想要的那样干净：

li {
  padding-top: 30px; /* equal to or greater than the background-image's height */
}

如果需要，使用您选择的菜单类型为 li 添加前缀将增加特异性。

【讨论】：