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

Question

这是代码

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

Answer 1

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

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

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

Answer 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 以反映实际的样式方案