css3半透明遮盖

CSS3半透明遮盖可以使网页更加美观，也可以实现一些特殊效果，比如将图片变为灰色

/* 使用伪元素before实现半透明遮盖 */.demo {
    position: relative;
}
.demo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
/* 设置rgba颜色，在最后一位a（alpha通道）设置透明度，数值为0-1之间 */}
/* 图片灰色效果 */.demo img {
    filter: grayscale(100%);
/* 将图片变为100%灰色 */}
    

以上代码可以实现一个半透明遮盖和图片灰色效果的例子。

另外，需要注意的是，半透明遮盖的父元素需设置position属性，使伪元素能够继承父元素的尺寸和位置。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！