亿企邦
  • 首页
    •
  • 解决方案&服务
    •
  • 客户&案例
    •
  • 营销资讯
    •
  • 关于我们
    •
    15158846557 或 在线咨询 在线咨询
    亿企邦
    15158846557 或 在线咨询
    亿企邦

    快捷入口

    所在位置： 首页 > 营销资讯 > 网站运营 > 一行代码，让网页变为黑白配色

    一行代码，让网页变为黑白配色

    时间：2023-10-07 02:00:01 | 来源：网站运营

    时间：2023-10-07 02:00:01 来源：网站运营

    一行代码，让网页变为黑白配色：

    背景

    让网页变为黑白配色，是个常见的诉求。而且往往是突如其来的诉求，是无法预知的。当发生这样的需求时，我们需要迅速完成变更发布。

    2022年12月1日，本站首页已经变成了黑白配色。

    我的小网站首页也变成了黑白配色：

    一行代码

    这一行代码是个CSS代码：

    filter: grayscale(1)为了使整个网页生效，你可以把它放在 <html> 标签的样式里。为了更好的兼容性，你可以补一个带 -webkit- 前缀的样式，放在 filter 后面。例如：

    <style>html { filter: grayscale(1); -webkit-filter: grayscale(1);}</style>你也可以用内联样式，只要没用 important CSS 语法，内联样式优先级最高：

    <html style="filter:grayscale(1);-webkit-filter:grayscale(1)">...</html>

    原理

    我们使用了 CSS 特性 filter，并用了 grayscale 对图片进行灰度转换，允许有一个参数，可以是数字（0到1）或百分比，0% 到 100% 之间的值会使灰度线性变化。

    如果你不想完全灰掉。可以设置个相对小的数字。

    兼容性

    我们使用了 CSS 特性 filter，兼容性还是不错的：

    为了更好的兼容性，最好加一个前缀 -webkit-，例如：

    filter: grayscale(.95);-webkit-filter: grayscale(.95);

    filter 样式加到 <html> 还是 <body> 上

    我的小网页是把 filter 样式加到了 <body> 元素上。通常这没有问题。

    <body style="filter:grayscale(1);-webkit-filter:grayscale(1)">...</body>但如果你的网页内有「绝对和固定定位」元素，一定要把 filter 样式加到 <html> 上。

    原因见: https://drafts.fxtf.org/filter-effects/#FilterProperty

    引用：

    A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context.
    翻译：

    若 filter 属性的值不是 none，会给「绝对和固定定位的后代」创建一个 containing block，除非 filter 对应的元素是「当前浏览上下文中的文档根元素」（即<html>）。
    因此，兼容性最好的方法是把 filter 样式加到 <html> 上。这样不会影响「绝对和固定定位的后代」。

    这里小程序有个坑，如果你的页面代码有「绝对和固定定位的后代」，就不能把 filter 样式 加到 <page> 上，而是要找个元素，这个元素没有「绝对和固定定位的后代」，你可以把 filter 样式加到这个元素上。

    写在最后

    我是HullQin，公众号「线下聚会游戏」的作者（欢迎关注公众号，联系我，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了「联机桌游合集」，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋、象棋、UNO等游戏，不收费无广告。喜欢可以关注我噢～我有空了会分享做游戏的相关技术。



    关键词：黑白,配色

    推荐文章

    新闻资讯

    整合营销 网络营销 网络推广 信息时代 建站知识 网站运营 电子商务 营销百科 公司新闻 行业动态 品牌营销

    推荐资讯

    74
    73
    25
    news

    微信公众号

    版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

    为了最佳展示效果，本站不支持IE9及以下版本的浏览器，建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
    关闭