关于如何控制将H5网页整个黑白这件事情
在样式中添加下面属性就可以了
-webkit-filter: grayscale(.95); // 也可以百分比grayscale(95%)
兼容
-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);
顺便介绍一下 CSS3的滤镜 -webkit-filter
-webkit-filter用法是标准的CSS写法,如:
-webkit-filter: blur(2px);
-webkit-filter 支持的效果有:
- blur 模糊
-webkit-filter: blur(2px);
// 只能百分比 - brightness 亮度
-webkit-filter: brightness(20%);
// 可以超出100% 百分比越高越亮 - contrast 对比度
-webkit-filter: contrast(50%);
// 范围越大代表对比越大 - drop-shadow 阴影
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
- grayscale 灰度
-webkit-filter: grayscale(95%);
// 同上 - opacity 透明度
-webkit-filter: opacity(50%);
- sepia 褐色
-webkit-filter: sepia(100%);
- invert 反色
-webkit-filter: invert(100%);
// 颜色反过来 - saturate 饱和度
-webkit-filter: saturate(1000%);
- hue-rotate 色相旋转
-webkit-filter: hue-rotate(180deg);
评论 (0)