怎么使一行代码实现网页变灰

不念不忘少年蓝@ 2023-07-24 02:00 124阅读 0赞

如何实现下列效果,更换多套CSS么?那多费劲,那么使用一招快速变更页面为灰色,等清明节过完了,就可以恢复

format_pngformat_png

主要是给html标签加个样式

  1. html.gray {
  2. -webkit-filter: grayscale(.95);
  3. }

其兼容性写法为

  1. html {
  2. -webkit-filter: grayscale(100%);
  3. -moz-filter: grayscale(100%);
  4. -ms-filter: grayscale(100%);
  5. -o-filter: grayscale(100%);
  6. filter: grayscale(100%);
  7. filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  8. }

这种写法的官方介绍为

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。CSS 标准里包含了一些已实现预定义效果的函数。你也可以参考一个 SVG 滤镜,通过一个 URL 链接到 SVG 滤镜元素 (SVG filter element[1])。

参考: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

发表评论

表情:
评论列表 (有 0 条评论,124人围观)

还没有评论,来说两句吧...

相关阅读

    相关 CSS之纪念日主题网页

    > 你好,我是Vam的金豆之路,可以叫我豆哥。2019年年度博客之星、技术领域博客专家。主要领域:前端开发。我的微信是 maomin9761,有什么疑问可以加我哦,自己创建了一