实现网站都变成灰色-filter

CamilleZJ

已于 2022-12-06 23:08:09 修改

阅读量315

点赞数

分类专栏： css 前端文章标签： css3 前端 filter grayscale

于 2022-12-06 23:02:55 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/CamilleZJ/article/details/128211901

版权

前端同时被 2 个专栏收录

123 篇文章 2 订阅

订阅专栏

css

18 篇文章 0 订阅

订阅专栏

如下：当某些情况发生时一些娱乐网站统一变成灰色系，全站的内容都变成灰色了，包括按钮、图片等等。

怎么实现的？

最简单的是考虑所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的，按钮等样式也统一换成灰色样式。

但这个成本太高了，而且万一某个控件忘记加灰色样式了就会出现问题。

1、滤镜filter

CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

filter: filter函数 | url(带滤镜的svg)

具体查看：css filter_CamilleZJ的博客-CSDN博客

//多个空格分隔
filter: <filter-function> [<filter-function>]* | none  

//给 SVG 元素 <filter> 引用滤镜，如下：

filter: url(file.svg#filter-element-id)

/* URL to SVG filter */
filter: url("filters.svg#filter-id");

/* <filter-function> values */
filter: blur(5px);   //模糊
filter: brightness(0.4);  //使图片更亮0%-全黑图像。100%（1）-保持不变。大于 100%-更明亮
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);  //改变输入图像灰度，0% 到 100%，0%不变，大于会变灰色
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);  //透明度
filter: saturate(30%);  //转换图像饱和度
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Use no filter */
filter: none;

/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: unset;

实现灰色系：在根元素或root元素上添加class为gray：

html.gray {
    filter: grayscale(85%) saturate(80%);
    -webkit-filter: grayscale(85%) saturate(80%);
    -moz-filter: grayscale(85%) saturate(80%);
    -ms-filter: grayscale(85%) saturate(80%);
    -o-filter: grayscale(85%) saturate(80%);
    filter: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=.85);
    -webkit-filter: grayscale(.85) saturate(.8);
}


.gray, html {
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

如下：b站和爱奇艺