CSS网页变灰效果

CSSHTML大约 601 字

滤镜函数

设置在html节点,则应用于全局。

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: contrast(175%) brightness(3%)

兼容性

IE外,其他的PC、手机端的浏览器都支持,Firefox的 PC、安卓端还单独对SVG图像加了支持。

filter参数

  • url:设置一个SVG滤镜
  • blur:高斯模糊
  • brightness:给图片应用一种线性乘法,使其看起来更亮或更暗
  • contrast:调整图像的对比度
  • drop-shadow:给图像设置一个阴影效果
  • opacity:转化图像的透明程度
  • sepia:将图像转换为深褐色
  • grayscale:灰色图像

参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

阅读 290 · 发布于 2020-04-06

————        END        ————

扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看换一批