借助CSS3的filter滤镜实现灰色主题模式

最新推荐文章于 2023-08-15 14:27:28 发布

是小宗啊？

最新推荐文章于 2023-08-15 14:27:28 发布

阅读量824

点赞数

分类专栏：开发百宝箱系列文章标签： css3 css 前端 filter

本文链接：https://blog.csdn.net/shaofengzong/article/details/121848269

版权

开发百宝箱系列专栏收录该内容

38 篇文章 5 订阅

订阅专栏

国家哀悼日，各大网站会将主题变成灰白色。突然又想起了汶川大地震，悲痛。

其实实现的方式很简单，使用css3滤镜中grayscale(%)灰度函数。

如何使用如下：

<button onclick="javascript:document.body.setAttribute('style','filter: grayscale(100%)')">开启灰色模式</button>
<button onclick="javascript:document.body.setAttribute('style','filter: grayscale(0%)')">关闭灰色模式</button>

完整的效果图如下：完整的演示代码在最后贴出：
在这里插入图片描述
点击开启灰色模式后：

点击关闭灰色模式后：

完整演示代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>灰色主题演示</title>
  <style>
    /* 去除浏览器默认样式 */
    * {
      padding: 0;
      margin: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      position: relative;
    }

    header {
      width: 100%;
      height: 60px;
      background-image: linear-gradient(to right, #1AE7EA, #31FAC5);
      text-align: center;
    }

    h1 {
      line-height: 60px;
      color: #FFA;
    }

    section {
      position: relative;
      width: 100%;
      height: calc(100% - 60px);
      margin: auto;
      background-image: linear-gradient(#1E5375, #FEDAA0);
    }

    .content {
      /* 垂直居中的一种写法，还有很多方式 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      font-size: 24px;
      color: #FFFFFF;
    }
  </style>
</head>

<body>
  <header>
    <h1>灰色主题演示</h1>
  </header>
  <section>
    <div class="content">
      <p>这里里主体部分，我们给一点背景色。</p>
      <button onclick="javascript:document.body.setAttribute('style','filter: grayscale(100%)')">开启灰色模式</button>
      <button onclick="javascript:document.body.setAttribute('style','filter: grayscale(0%)')">关闭灰色模式</button>
    </div>

  </section>
</body>

</html>

下次唠点别的。

是小宗啊？

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
借助CSS3的filter滤镜实现灰色主题模式

国家哀悼日，各大网站会将主题变成灰白色。突然又想起了汶川大地震，悲痛。其实实现的方式很简单，使用css3滤镜中grayscale(%)灰度函数。如何使用如下：<button onclick="javascript:document.body.setAttribute('style','filter: grayscale(100%)')">开启灰色模式</button><button onclick="javascript:document.body.setAttribu
复制链接

扫一扫