关于控制整个页面黑白
侧边栏壁纸
  • 累计撰写 23 篇文章
  • 累计收到 48 条评论

关于控制整个页面黑白

Zuiet
2022-12-02 / 0 评论 / 390 阅读 / 正在检测是否收录...

关于如何控制将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

评论 (0)

取消