实现全站灰度视觉效果的 CSS 方案:核心代码实现及多场景应用指南

71次阅读
没有评论

快速实现网站全站灰度效果

通过在网页中嵌入一段简单的 CSS 样式代码,可以让整个网站瞬间转变为黑白灰度模式,适用于公祭日、纪念日等需要营造肃穆氛围的特定场景。

效果预览

实现全站灰度视觉效果的 CSS 方案:核心代码实现及多场景应用指南

实施步骤

将以下代码片段复制并粘贴到网站首页的任意位置(建议放置在 <head> 标签内或页脚位置)即可立即生效:

<style type="text/css">
html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
}
</style>

注意事项

  • 兼容性: 代码中包含了 -webkit-filterprogid 两种定义,旨在确保现代浏览器(如 Chrome、Safari、Edge)以及旧版 IE 浏览器均能正确显示灰度效果。
  • 恢复方法: 若需恢复彩色,直接删除上述代码片段即可。

相关工具推荐

如果需要更灵活的控制,可以尝试使用 黑白网页恢复彩色插件

正文完
 0
Administrator
版权声明:本站原创文章,由 Administrator 于2022-02-23发表,共计416字。
转载说明:除特别说明外,本站原创内容采用 Creative Commons Attribution 4.0 (CC BY 4.0) 许可协议发布,转载请注明来源并保留原文链接。 本站部分内容基于公开资料整理,并可能经 AI 技术辅助生成或优化,仅供参考,不构成任何专业建议,请读者自行判断与核实。 本站不对第三方资源的可用性、安全性或合法性承担任何责任。
评论(没有评论)
验证码