使用CSS在列表中将背景图像设置为背景颜色

前端之家收集整理的这篇文章主要介绍了使用CSS在列表中将背景图像设置为背景颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是代码
<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;
}

解决方法

将!important属性添加到背景图像中.像这样:
.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以反映实际的样式方案

猜你在找的CSS相关文章