【HTML】如何做图片的遮幕效果

 

效果图：

在body里创建好盒子，把想加遮幕的图片放进去(。・∀・)ノ

<div class="banner">
        <img src="images/banner3.jpg" alt="">
</div>

下面是css样式

关键就是盒子的背景background设置需要的遮幕颜色，img的样式设置opacity，数值越小，遮幕效果越明显。

.banner{
    top: 80px;
    width: 100%;
    height: 600px;
    background: #000000;
    position: absolute;
}
.banner>img{
    width: 100%;
    height: 600px;
    opacity: 0.6;
}

补充下渐变遮幕效果

把opacity换成

-webkit-mask:-webkit-linear-gradient(rgba(0,0,0,1),rgba(0,0,0,1),rgba(0,0,0,0.1));

完成了(oﾟvﾟ)ノ