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滤镜

  • 0
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值