如何使用 CSS filter 把整个网页快速切换成灰色主题 All In One

如何使用 CSS filter 把整个网页快速切换成灰色主题 All In One

为追思疫情中逝世的同袍们，在哀悼日 这一天，好像整个世界都是灰色的。
感觉最深应该就是这一天你打开任何主流的网站、软件、App，页面都是死灰色的一片。

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

CSS filter & SVG filter

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

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
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;

filter: url(resources.svg#c1)

filter: blur(5px)

filter: contrast(200%)

filter: drop-shadow(16px 16px 10px black)

filter: grayscale(100%)

filter: hue-rotate(90deg)

filter: invert(100%)

filter: opacity(50%)

filter: saturate(200%)

filter: sepia(100%)

/*
复合函数
你可以组合任意数量的函数来控制渲染。下面的例子可以增强图像的对比度和亮度。
*/
filter: contrast(175%) brightness(103%)

blur() 函数将高斯模糊应用于输入图像。
radius 定义了高斯函数的标准偏差值，或者屏幕上有多少像素相互融合，因此，较大的值将产生更多的模糊。
若没有设置值，默认为 0。
该参数可以指定为 CSS 长度，但不接受百分比值。

brightness() 函数将线性乘法器应用于输入图像，使其看起来或多或少地变得明亮。
值为 0% 将创建全黑图像。值为 100% 会使输入保持不变。其他值是效果的线性乘数。
如果值大于 100% 提供更明亮的结果。
若没有设置值，默认为 1。

contrast() 函数可调整输入图像的对比度。
值是 0% 的话，图像会全黑。值是 100%，图像不变。
值可以超过 100%，意味着会运用更低的对比。
若没有设置值，默认是 1。

drop-shadow() 函数对输入图像应用阴影效果。阴影可以设置模糊度的，以特定颜色画出的遮罩图的偏移版本，最终合成在图像下面。

grayscale() 函数将改变输入图像灰度。
amount 的值定义了转换的比例。值为 100% 则完全转为灰度图像，值为 0% 图像无变化。
值在 0% 到 100% 之间，则是效果的线性乘数。
若未设置值，默认是 0。

hue-rotate() 函数在输入图像上应用色相旋转。
angle 一值设定图像会被调整的色环角度值。值为 0deg，则图像无变化。
若值未设置值，默认为 0deg。
该值虽然没有最大值，超过 360deg 的值相当于又绕一圈。

invert() 函数反转输入图像。
amount 的值定义转换的比例。值为 100% 则图像完全反转。
值为 0% 则图像无变化。值在 0% 和 100% 之间，则是效果的线性乘数。
若未设置值，则默认为 0。

opacity() 转化图像的透明程度。
amount 的值定义转换的比例。值为 0% 则是完全透明，值为 100% 则图像无变化。
值在 0% 和 100% 之间，则是效果的线性乘数。也相当于图像样本乘以数量。
若未设置值，则默认为 1。
该函数与已有的 opacity 属性很相似，不同之处在于通过 filter，一些浏览器为了提升性能会提供硬件加速。

saturate() 函数转换图像饱和度。
amount 的值定义转换的比例。值为 0% 则是完全不饱和，值为 100% 则图像无变化。
其他值是效果的线性乘数。超过 100% 则有更高的饱和度。
若未设置值，则默认为 1。

sepia() 函数将图像转换为深褐色。
amount 的值定义转换的比例。值为 100% 则完全是深褐色的，值为 0% 图像无变化。
值在 0% 到 100% 之间，值是效果的线性乘数。
若未设置值，则默认为 0。

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>
</svg>

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="contrast">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
    </feComponentTransfer>
  </filter>
</svg>

<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
 <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
    <feFlood flood-color="[color]"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</svg>

<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg">
 <filter id="blurMe">
   <feGaussianBlur stdDeviation="5"/>
 </filter>

 <circle cx="60" cy="60" r="50" fill="green" />

 <circle cx="170" cy="60" r="50" fill="green"
          filter="url(#blurMe)" />
</svg>

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/filter

codes

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

/* SVG  filter*/

html {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url(image.svg#grayscale);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);
}

body{
  filter:gray;
}

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

*{
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter: gray;
}

demos

html {
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);filter: gray;
  -webkit-filter: grayscale(1);
}

img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);	
    filter: grayscale(100%);
    filter: url(/img/2013people/gray.svg#grayscale);
   filter: gray;-webkit-filter: grayscale(1);
}

治丧委员会公告

http://politics.people.com.cn/n1/2022/1130/c1001-32577960.html

治丧委员会名单

http://politics.people.com.cn/n1/2022/1130/c1001-32577941.html

refs

https://www.cnblogs.com/xgqfrms/p/16939082.html#5130015

https://www.jianshu.com/p/e220950e0be8

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---