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

Question

我想用css,在我的图像上填充某种颜色,它会有模糊减少.

我尝试了很多方法,但不能在图像上插入颜色.请告诉我参数,以便我可以调整宽度或高度,或不透明度,更改颜色.

Answer 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>