CSS渐变不透明度幻灯片图像从左到右颜色白色 [英] css gradient opacity slide image left to right color white

问题描述

我想使用css，以在图像上填充某种颜色，它将减少模糊.

I want to use css, to fill a certain color on my image, it will have a blur reduction.

我尝试了很多方法，但是颜色无法插入图像.请告诉我这些参数，以便我可以调整宽度或高度或不透明度，以更改颜色.

I tried many ways but colors can not be inserted on the image. Please tell me the parameters so that I can adjust the width or height, or the opacity, change the color.

推荐答案

您可以在此之后使用伪元素 将颜色定位在图像上方，如下所示:

You can use pseudoelement afterto position the color above the image as this:

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>

这篇关于CSS渐变不透明度幻灯片图像从左到右颜色白色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！