[分享]css3图片遮罩rgba

CSS3的图片遮罩功能可以帮助我们很好地美化网页中的图片。其中，rgba就是一种常用的颜色格式，它可以指定一个颜色的红、绿、蓝和透明度四个通道的数值。 .box { : relative; displ...

CSS3的图片遮罩功能可以帮助我们很好地美化网页中的图片。其中，rgba就是一种常用的颜色格式，它可以指定一个颜色的红、绿、蓝和透明度四个通道的数值。

 .box {
        position: relative;
        display: inline-block;
    }
    .box img {
        display: block;
    }
    .box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 0.6);
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .box:hover::before {
        opacity: 1;
    } 

以上代码演示了如何使用rgba来创建一个简单的图片遮罩效果。具体来说，我们创建一个含有背景色的伪元素，并设置其初始透明度为0。当鼠标划过时，我们通过:hover伪类来将透明度改为1，从而实现图片遮罩的效果。

需要注意的是，如果我们希望图片能够响应鼠标事件，需要将其设置为块级元素。同时，显示图片的父容器也需要设置为相对定位，以便让遮罩元素能够正确覆盖图片。