顯示圖片重疊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; 
}