CSS 网页变灰效果

CSS HTML 大约 602 字

滤镜函数

设置在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

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

———— END ————

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

昵称：

随便看看换一批

CSS 网页变灰效果

滤镜函数

复合函数

兼容性

filter参数

参考

标签

友链

站长统计

阅读排行榜

点赞排行榜

评论排行榜

分享至微信