显示图片重叠的css元素[重复]

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