使用 CSS 在列表中使背景图像高于背景颜色

Posted 2023-02-21

【中文标题】使用 CSS 在列表中使背景图像高于背景颜色

【英文标题】：Use CSS to make background-image above background-color in a list

【发布时间】：2012-01-19 11:43:14

【问题描述】：

这是代码

<ul>
    <li class="test">
         <a href="#">
            <h2>Blah</h2>
            <p>Blah Blah Blah</p>
         </a>
    </li>
</ul>

基本上，我的列表已经有了一些样式，例如，我为它设置了背景色。

现在在“测试”类中，我还设置了背景图像。

我的问题是我想让背景图像保持在背景颜色之上，但我不知道如何实现这一点。我尝试使用 z-index，但我认为它不适用于背景图像。

请看图

编辑：这是 CSS 代码

例如，这是我列表的样式

#sidebar ul li  
    background:#ccf;

这是类测试的样式

.test
    background-image: url('img/big_tick.png');
    background-repeat:no-repeat;
    background-position: bottom right;
    -moz-background-size: 30%;
    -webkit-background-size: 30%;
    background-size: 30%;    
    margin-right: 30px;

【问题讨论】：

这是一个 jsfiddle 与他的设置：jsfiddle.net/LHmfT

【参考方案1】：

尝试：为 .test 类添加特异性：#sidebar ul li.test

或者，如果可能的话，更好的是，将 background-color 添加到 .test 类中，并完全摆脱元素选择器。

除非您绝对需要，否则我会避免使用 !important。从长远来看，使用它会让编辑你的 CSS 变得很痛苦。我建议不要使用 !important，而是学习特异性：http://reference.sitepoint.com/css/inheritancecascade

【讨论】：

这只是改变了背景图片的位置，但不会让它停留在背景颜色之上

尝试：为测试类添加特异性：#sidebar ul li.test 或者，更好的是，如果可能的话，将背景色添加到测试类，并让元素选择器完全变红。

【参考方案2】：

将!important 属性添加到您的background-image。像这样：

.test a
background-image: url('img/big_tick.png') !important;
background-repeat:no-repeat;
background-position: bottom right;
-moz-background-size: 30%;
-webkit-background-size: 30%;
background-size: 30%;    
margin-right: 30px;

我有一个例子小提琴here

编辑：我将类更改为 .test a 以反映实际的样式方案

【讨论】：

我试图把 !important 放在背景色后面。 @alpa 我试图将背景更改为背景颜色，但它仍然不起作用。对于列表，我遵循了 Nettuts 的这个教程 [link]net.tutsplus.com/tutorials/html-css-techniques/… 您可以查看链接以了解有关列表 CSS 的更多信息谢谢您的帮助！

你用的是什么浏览器？ !important 标志在此处的 Chrome 和 IE 中都有效。如果您为列表发布更多样式，那可能会有所帮助。

嗨，我在 FF 8.0 和 Chrome 16 上对此进行了测试，但我仍然面临这个问题。列表的样式在链接net.tutsplus.com/tutorials/html-css-techniques/… 中。谢谢你帮助我:)

我现在明白了！问题来自于背景被设置在 a 中的事实。这是一个有效的小提琴：jsfiddle.net/LHmfT/11 我已经更新了我的答案以反映修复。让我知道它是如何工作的。 :)

非常感谢！它现在完美无缺。我太笨了，为不同的元素设置背景T__T，再次感谢你！