侧边栏壁纸
  • 累计撰写 251 篇文章
  • 累计创建 138 个标签
  • 累计收到 16 条评论

目 录CONTENT

文章目录

给网页添加灰度(黑白)滤镜效果

Sherlock
2020-04-04 / 0 评论 / 0 点赞 / 1873 阅读 / 1374 字 / 编辑
温馨提示:
本文最后更新于 2023-10-09,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
<style>
html {
    -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);
}
</style>

通过filter这个全局的 CSS 样式就能将整个网站变成灰色效果,其实就是一个滤镜的意思。

官方介绍如下:

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

更多用法可以参考MDN 的官方介绍

0
css
  1. 支付宝打赏

    qrcode alipay
  2. 微信打赏

    qrcode weixin

评论区