通过css实现页面黑白效果

前言:

        临近下班,接到上级通知,为了缅怀今日逝世的英雄;需要对网站进行微调整—— 整个页面呈现出黑白效果

实现:

        css的filter(滤镜)属性  

 filter可以设置的属性值有:

        - none:默认值、没有效果

        - blur(px):为元素设置模糊度,设置的值越高越模糊(不接受百分比值)

        - brightness(%):设置亮暗度,0%图案全黑、100%图像无变化、>100%图像更亮

        - contrast(%):设置元素的灰白度,0%元素全灰、100%元素无变化、>100%元素更白

        -drop-shadow(h-shadow v-shadow blur spread color):设置阴影效果,类似box-shadow

        -grayscale(%):将元素转换为灰白度图像。取值范围(0%-100%或0-1)

        -hue-rotate(deg):

        -invert(%):反转输入图像

        -opacity(%):转化元素的透明度,相当于opacity属性

        -saturate(%):转换元素饱和度

        -sepia(%):将图片转化为深褐色

        -url():URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素

可以同时使用多个滤镜,每个滤镜用空格隔开

例:

img {
    -webkit-filter: contrast(200%) brightness(150%);  /* Chrome, Safari, Opera */
    filter: contrast(200%) brightness(150%);
}

通过js修改属性时:document.body.style.WebkitFilter="grayscale(100%)"

                        

你可能感兴趣的:(css,html,前端)