使用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

将!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;

}

我在这里有一个例子

编辑:我改变了类.test a来反映实际的样式方案