使用CSS在背景颜色的列表中做背景图像 [英] Use CSS to make background-image above background-color in a list

问题描述

这是代码

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

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

Basically, my list already has some styling, for example, I set the background-color for it.

现在在test类中​​，我还设置了一个背景图片。

Now in the class "test", I also set a background-image.

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

My question is I want to make the background-image stays above the background-color and I dont know how to achieve this. I tried with z-index but I think it is not applicable for background-image.

请看看图像

Edit：这是CSS代码

This is the CSS Code

例如，这是我的列表的样式

For example, this is the styling for my list

#sidebar ul li{  
    background:#ccf;
}

这是类test的样式

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

推荐答案

c>！important 属性添加到 background-image 。像这样：

Add the !important attribute to your background-image. Like this:

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

I changed the class to .test a to reflect the actual styling scheme

这篇关于使用CSS在背景颜色的列表中做背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！