• 首页
  • 说说
  • 友人
  • 留言
  • 赞赏
  • 建站史
  • 搜索
  • 夜间模式
    ©2025  Feng的小屋 Theme by OneBlog
    搜索
    标签
    # HTML # CSS # JS # 代码 # 分享 # 美化 # 感悟 # 小游戏 # 摄影 # 摄影知识
    📅 日常

    站点变成灰色只要一步~

    2025.09.18 / 68 阅读 / 2 评论 / 1267 字
    📅 日常

    站点变成灰色只要一步~

    阅读 68 评论 2 发表于2025.09.18
    AI摘要

    文章摘要:网站变灰是通过视觉表达庄重感,用以纪念重大事件、缅怀逝者或铭记历史,技术上可通过CSS滤镜实现。其核心在于用视觉语言传递集体情感和人文关怀。这篇文章介绍了实现这一效果的方法和注意事项。

    [secret]
    测试123
    [/secret]

    用一段简单的CSS套个滤镜

    /*
    针对 IE 浏览器的灰度滤镜设置   progid:DXImageTransform.Microsoft.BasicImage 是 IE 专属的滤镜语法   grayscale=1 表示启用灰度模式(1 为开启,0 为关闭)   兼容 IE 6-9 等旧版本浏览器 
    */ 
    
    html {   filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    
    /*
    针对 WebKit 内核浏览器的灰度滤镜设置(如 Chrome、Safari 等)     -webkit- 是浏览器前缀,适配早期 WebKit 内核实现     grayscale(100%) 表示将灰度值设为 100%(完全去色)
    */   
    
    -webkit-filter: grayscale(100%); }

    或

    html {    /* 标准 CSS 滤镜:将页面转为 100% 灰度,现代浏览器通用写法 */   
    
    filter: grayscale(100%);       
    
    /* WebKit 内核浏览器前缀(Chrome、Safari、Edge 等)的灰度设置 */   
    
    -webkit-filter: grayscale(100%);       
    
    /* Mozilla 内核浏览器(Firefox)的灰度设置 */   
    
    -moz-filter: grayscale(100%);       
    
    /* Microsoft 浏览器(旧版 IE/Edge)的灰度设置 */   
    
    -ms-filter: grayscale(100%);       
    
    /* Opera 浏览器的灰度设置 */   
    
    -o-filter: grayscale(100%);       
    
    /* 通过 SVG 滤镜实现灰度效果,用于兼容某些不支持 CSS filter 的浏览器 */   
    
    filter: url("data:image/svg+xml;utf8,#grayscale");       
    
    /* IE 专属滤镜语法(IE6-9),通过微软私有属性实现灰度 */
    
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);       
    
    /* WebKit 内核浏览器的另一种写法(部分旧版本浏览器只识别 1 而非 100%) */   
    
    -webkit-filter: grayscale(1); }

    大家可以在放上去的时候把注释给去掉哦~

    怎么样,是不是超级简单,这样又水了一篇文章了~

    本文著作权归作者 [ Feng ] 享有,未经作者书面授权,禁止转载,封面图片来源于 [ 互联网 ] ,本文仅供个人学习、研究和欣赏使用。如有异议,请联系博主及时处理。
    CSS分享
    取消回复

    发表留言
    回复

    读者留言2

    1. Vind Lv.3
      中国上海市电信
      2025-09-20 10:05 回复

      评个论,虽然好像我不需要这个 CSS

      1. Feng 博主
        中国广东省中山市电信
        2025-09-20 12:46 回复
        @Vind

        前两天918水的文章。◕ᴗ◕。

    加载更多评论
    加载中...
    — 已加载全部评论 —
    首页说说友人留言赞赏建站史
    Copyright©2025  All Rights Reserved.  Load:0.012 s
    Theme by OneBlog V3.6.3
    夜间模式

    开源不易,请尊重作者版权,保留基本的版权信息。