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

Posted 2023-03-06

【中文标题】显示图片重叠的css元素[重复]

【英文标题】：display picture overlapping css elemts [duplicate]

【发布时间】：2017-10-30 17:55:19

【问题描述】：

我想在左侧显示图像（边框与蓝色框左侧白色部分的左边框相同）。现在图片只有在删除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/

【参考方案1】：

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

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

另见fiddle

【讨论】：

这是非常好的解决方案..!!

是的，我忘了一个元素可以有多个背景

但是在这个例子中，如果每个部分都有不同的图片，如何显示元素呢？

你必须定义不同的类。

【参考方案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;

【讨论】：

我试过了..但这并没有解决问题

你能解释一下吗，因为我可能误解了问题的本质

jsfiddle.net/beekvang/edp5o27u/1 我需要在左侧显示图片。但是在这个例子中，如果每个部分都有不同的图片，如何显示元素？