grayscale(amount) : 对图片进行灰度转换。
amount转换值的大小,可以是数字或百分比。
当值为 100% 时,灰度最大。
0% 时与原图没有区别。
0% 到 100% 之间的值会使灰度线性变化。
amount 为空时使用值为1。
CSS代码,任选一种方式
- filter: grayscale(100%);
- filter: grayscale(1);
-
为了方便,可以在后台这样加入
- <style type="text/css">
- html {
- filter: grayscale(100%);
- }
- </style>
-
适配多种浏览器
- -webkit-filter: grayscale(100%);
- -moz-filter: grayscale(100%);
- -ms-filter: grayscale(100%);
- -o-filter: grayscale(100%);
- filter: grayscale(100%);
-
还有一些其他的效果
- /*blur 模糊*/
- filter:blur(2px);
-
- /*brightness 亮度*/
- filter:brightness(25%);
-
- /*contrast 对比度*/
- filter: contrast(50%);
-
- /*drop-shadow 阴影*/
- filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
-
- /*opacity 透明度*/
- filter: opacity(50%);
-
- /*grayscale 灰度*/
- filter: grayscale(80%);
-
- /*sepia 褐色*/
- filter: sepia(100%);
-
- /*invert 反色*/
- filter: invert(100%);
-
- /*hue-rotate 色相旋转*/
- filter:hue-rotate(180deg);
-
- /*saturate 饱和度*/
- filter: saturate(1000%);
-