CSS3滤镜 |
您所在的位置:网站首页 › 黑白颜色转换的app › CSS3滤镜 |
每当遭遇重大灾难,比如之前的非典、汶川地震,以及前几天清明节对新冠肺炎逝世同胞的哀悼,各大主流网站也会呈黑白两色。今天偶然搜了下实现机制,原来是如此的简单,也对之前不怎么了解的滤镜刮目相看了。 将以下样式代码放到页面中即可实现页面黑白处理,这是CSS3滤镜中的灰度滤镜(grayscale)。 html,body { -webkit-filter: grayscale(1); /* Chrome, Safari, Opera */ filter: grayscale(1); }比如百度站点灰度处理后如下图效果: 附1:其它常用滤镜类型 滤镜代码滤镜名称说明blur(px)模糊滤镜参数接受一个像素长度值,表示像素融合半径 brightness(%|number)亮度滤镜参数接受一个小数或百分比,默认是1或100%(无变化),值越小越暗contrast(%|number)对比度滤镜参数接受一个小数或百分比,默认是1或100%(无变化),值越小对比度越低drop-shadow(h-shadow v-shadow blur spread color)阴影滤镜接受5个参数: h-shadow:水平距离阴影偏移量 v-shadow:垂直距离阴影偏移量 blur:模糊半径,值越大越模糊 spread:阴影调节参数,正值阴影变大,负值缩小 color:阴影颜色 hue-rotate(deg)色相旋转滤镜参数接受一个角度值,超过360度后循环旋转invert(%|number)反色滤镜参数接受一个小数或百分比,值越大翻转程度越高opacity(%|number)透明度滤镜参数接受一个小数或百分比,值越小越透明saturate(%|number)饱和度滤镜参数接受一个小数或百分比,值越小越不饱和附2:常用滤镜类型案例 img.blur { -webkit-filter: blur(4px); filter: blur(4px); } img.brightness { -webkit-filter: brightness(0.30); filter: brightness(0.30); } img.contrast { -webkit-filter: contrast(180%); filter: contrast(180%); } img.shadow { -webkit-filter: drop-shadow(8px 8px 10px green); filter: drop-shadow(8px 8px 10px green); } img.huerotate { -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg); } img.invert { -webkit-filter: invert(100%); filter: invert(100%); } img.opacity { -webkit-filter: opacity(50%); filter: opacity(50%); } img.saturate { -webkit-filter: saturate(7); filter: saturate(7); }
参考:CSS3 filter滤镜 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |