CSS实现整站灰化
今日清明,愿天下清明。
致敬为疫情奋斗的所有人,为烈士哀祷,为仍奋斗在一线的医生护士和工作人员加油。
乘风破浪会有时,直挂云帆济沧海。
今天大部分的网站app都实现了整站灰化的效果,其实是利用一个CSS的样式实现的,兼容性较好的实现方式如下:
html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
filter可添加模糊或颜色偏移等图形效果,它其实还有很多用途:
添加SVG滤镜
filter: url(resources.svg#c1);
给图像设置高斯模糊
filter: blur(5px);
调节亮度
filter: brightness(0.5);
调节对比度
filter: contrast(200%);
添加阴影效果
filter: drop-shadow(16px 16px 10px black);
旋转图像的色相
filter: hue-rotate(90deg);
反转图像
filter: invert(100%);
添加图像透明度
filter: opacity(50%);
转换图像的饱和度
filter: saturate(200%);
转换图像为深褐色
filter: sepia(100%);
具体可查看:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
点赞1
支持一下