css渐变不透明度幻灯片图像从左到右颜色白色答案

【问题标题】：css gradient opacity slide image left to right color whitecss渐变不透明度幻灯片图像从左到右颜色白色
【发布时间】：2017-12-30 22:41:52
【问题描述】：

我想使用 css，在我的图像上填充某种颜色，它会减少模糊。

我尝试了很多方法，但无法在图像上插入颜色。请告诉我参数，以便我可以调整宽度或高度，或者不透明度，改变颜色。

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用伪元素after将颜色定位在图像上方，如下所示：

div, img {width:100%;}
div {position:relative;}
div:after {
  width:100%;
  content:'';
  display:block;
  position:absolute;
  top:0;
  left:0;
  background: linear-gradient(to right, rgba(247,247,49,1) 0%,rgba(255,255,255,0) 69%);
  height:100%;
}

<div>
  <img src="http://img.andrewprokos.com/TORONTO-PANORAMIC-SKYLINE-DUSK-1200PX.jpg" alt="">
</div>

【讨论】：

非常感谢:)

【解决方案2】：

您可以在div 上应用多个背景图像。

可以使用linear-gradient() 创建渐变叠加。

.image-box {
  height: 100px;
  background-image: linear-gradient(to right, gold 30%, transparent 80%),
                    url('https://i.imgur.com/waDgcnc.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%, cover;
}

&lt;div class="image-box"&gt;&lt;/div&gt;

【讨论】：

谢谢，我忘了说我不想设置为免费。

【解决方案3】：

试试下面

div.parent{width:100%;}
img{width:50%}
div.parent {position:relative;}
div.parent:after {
  width:100%;
  content:'';
  display:block;
  position:absolute;
  top:0;
  left:0;
  background: linear-gradient(to right, rgba(247,247,49,1) 33%,rgba(255,255,255,0) 94%);
  height:100%;
}
span img{visibility:hidden;}
label:before {
  width:100%;
  content:'';
  display:block;
  position:absolute;
  top:0;
  left:0;
  background: linear-gradient(to right, rgba(247,247,49,1) 52%,rgba(255,255,255,0) 94%);
  height:100%;
}

<div class="parent">
  <span><img src="https://i.ytimg.com/vi/QsRE4wQf39Y/maxresdefault.jpg" alt=""></span><label><img class="banner" src="https://i.ytimg.com/vi/QsRE4wQf39Y/maxresdefault.jpg" alt=""></label>
</div>

【讨论】：

谢谢你 :) 我解决了我的问题