一行代码实现网页变灰

2021-09-12

清明已过,谷雨未来。

文章图片
原图

一行代码变灰术：

文章图片
灰质图片

-webkit-filter: grayscale(1)

就这么顺利的完成了，就是给加了上面的样式而已。这里用到的是css3的滤镜，那我们顺便看看滤镜的其他用法吧！
-webkit-fiter是css3的一个属性

文章图片
支持它的浏览器嗯，对，IE不支持。当然IE有它自己的实现滤镜的方法，我们今天先不做研究。
灰度：
grayscale()：值取0~1，上边提到的就是这个。
对比度：
contrast(): 取值0~1：值为0时全黑，值为1时图像不变

文章图片

-webkit-filter: contrast(26%)

亮度：
brightness()
取值为0时全黑，1时无变化，大于1开始增亮

文章图片

-webkit-filter: brightness(26%)

取值为0：

文章图片

-webkit-filter: brightness(0)

变成200试试：

文章图片

webkit-filter: brightness(200%)

饱和度：
saturate()
取值为0完全不饱和，取值为1无变化

文章图片
完全不饱和

-webkit-filter: saturate(0);

褐色：
Sepia() : 取值为0~1 ,取0时图像无变化，取1时变为全褐色。

文章图片

-webkit-filter: sepia(100%);

模糊
blur(px)
值越大越模糊

文章图片
高斯模糊耶？我眼镜儿呢？这个海绵宝宝我看不清楚了，真是高斯模糊.

-webkit-filter: blur(3px);

透明度
opacity():取值0到1之间,值越小越透明，取值为0时全透明。

文章图片

-webkit-filter: opacity(20%);

反色：
invert()

文章图片

-webkit-filter: invert(100%);

令人瑟瑟发抖的海绵宝宝，额，为什么海绵宝宝变成了蓝色,难不成它在海里生活太久了?看下图就明白了:

文章图片
阴影效果:
drop-shadow(h-shadow v-shadow blur spread color)
前两个参数表示阴影偏移量,第一个是水平方向,正数向左,负数向右.第二个参数是竖直方向:正数向下,负数向上.第三个变量控制阴影边框的模糊度,越大越模糊,为0的时候最尖锐.第四个参数就是阴影的颜色了.

文章图片

【一行代码实现网页变灰】-webkit-filter:drop-shadow(10px10px 10px #000 ) ;

推荐阅读

上一篇：陷阱

下一篇：社群运营的“|社群运营的“ 道法术 ”