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

问题描述：

我想使用css，在我的图像上填充某种颜色，它会减少模糊。 css渐变不透明幻灯片图像从左到右颜色白色

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

答

您可以使用pseudoelement 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>

非常感谢你:) –

Np个。祝你的项目好运 –

答

您可以在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; 
 
}

<div class="image-box"></div>

谢谢，我忘了提及我不想成为免费。 –

@TranAudi你的欢迎） –

答

尝试以下

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>

谢谢你:)我resoled我的issuse –

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

相关推荐