显示图片重叠css elemts

Question

我想向左边显示图像（与蓝色框左边的白色区域的左边框相同的边框）。现在图像将只在删除时可见background-image: linear-gradient(#a4c2e8,#e2eaf2);

但我想保留渐变效果。怎么做 ？

.quate_sidebar { 
 
    list-style: outside none none; 
 
    margin: -6px; 
 
    margin-top: 5px; 
 
    padding: 30px; 
 
    padding-right: 126px; 
 
    padding-bottom: 5px; 
 
} 
 

 
.quate_sidebar li { 
 
    position: relative; 
 
    display: inline-block; 
 
    padding: 15px 25px; 
 
    padding-bottom: 0px; 
 
    margin-bottom: 10px; 
 
    margin-left: 14px; 
 
    background-image: linear-gradient(#a4c2e8, #e2eaf2); 
 
    /* text styles */ 
 
    text-decoration: none; 
 
    color: #4174c5; 
 
    font-size: 13px; 
 
    font-family: initial; 
 
    font-weight: 100; 
 
    border-radius: 3px; 
 
    box-shadow: 0px 1px 4px -2px #333; 
 
    display: block; 
 
    margin: 5.5px 0; 
 
    padding: 10px 10px 10px 50px; 
 
} 
 

 
.quate_icon_1 { 
 
    background: url(img/get_quate/get_quate_icon_1.png)no-repeat scroll 15px center; 
 
}

<ul class="quate_sidebar"> 
 
    <li class="quate_icon_1"><a href="#">Csab</a> </li> 
 
    <li class="quate_icon_1"><a href="">Maryy</a></li> 
 
</ul>

请参考这里的代码： https://jsfiddle.net/edp5o27u/

Answer 1

使用下面的.quate_sidebar li：

background-image: url('http:/placehold.it/30'), linear-gradient(#a4c2e8, #e2eaf2); background-repeat: no-repeat, repeat; 

参见本fiddle

Answer 2

如果图标背景图像添加到<a>元素，那么你就可以保持渐变背景图像<li>元素。

.quate_sidebar li { 
    position: relative; 
    display: inline-block; 
    padding: 15px 25px; 
    padding-bottom: 0px; 
    margin-bottom: 10px; 
    margin-left: 14px; 
    background-image: linear-gradient(#a4c2e8, #e2eaf2); 
    /* text styles */ 
    text-decoration: none; 
    color: #4174c5; 
    font-size: 13px; 
    font-family: initial; 
    font-weight: 100; 
    border-radius: 3px; 
    box-shadow: 0px 1px 4px -2px #333; 
    display: block; 
    margin: 5.5px 0; 
    padding: 10px 10px 10px 50px; 
} 

a.quate_icon_1 { 
    background: url(img/get_quate/get_quate_icon_1.png)no-repeat scroll 15px center; 
}