html - 显示图片重叠的css元素

This question already has answers here:

How do I combine a background-image and CSS3 gradient on the same element?
                                
                                    （16个回答）
                                
                        
                                2年前关闭。
            
                    
我想在左侧显示图像（边框与蓝色框左侧的白色部分的左侧边框相同）。现在，仅当删除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/

最佳答案

在.quate_sidebar li中使用以下内容：

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

另请参见此fiddle

关于html - 显示图片重叠的css元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44259159/