CSS实现网页变灰的效果

  在今年(2020年)的4月4日,国家经历了非常悲痛的时刻,北京时间 10 点钟全国默哀,来致敬英雄。

 

            

网站变灰

   当天网站的页面和内容都变成了灰色,比如:百度、哔哩哔哩、爱奇艺  等等。

 CSS实现网页变灰的效果_第1张图片

实现这种的页面效果我们需要用到一个css的过滤属性:filter(滤镜) 

    可以将改样式属性设置在某个DOM节点上,实现整个网页的灰色效果,可以将其设置为全局的效果,将属性设置在 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);

 

这里可以看下浏览器对 filter 属性的兼容性:

CSS实现网页变灰的效果_第2张图片

  这里可以看到除了 IE 不支持 ,其他的 PC、手机的浏览器都支持了。

  css3中的 filter 属性的默认值为 none (没有效果),无继承

  filter属性的 Filter 函数功能:

     模糊: blur(px) :给图像设置高斯模糊,“radius” 的值设定高斯函数的标准差,或者是屏幕上有多少像素相互融合,所以值越大,越模糊。默认值为 0,可以设置css长度值,不接受百分比值。

     亮度:brightness(%) :给图片应用一种线性乘法,使其看起来更亮或更暗。如果值为0%,图像会变黑。值是100%,则图像无变化,其他值是效果的线性乘数。

                 值可以超过 100%,图片会比原来的亮。默认值为 1 。

       灰度:grayscale(%) :将图片转换为灰度图像,值定义转换的比例。值为 100% 图像完全转换为灰度图像,值为 0% 图像无变化。默认值为 0deg。该值无最大值,超360deg时相当于又绕一圈。

       反转:invert(%) :反转图像,值定义反转的比例。值为 0% 无变化,值为 100% 时完全反转。值在 0% 和 100% 之间,则是效果的线性乘法,默认值为 0 。

      透明度:opacity(%):转化为图像的透明程度,值定义转换比例。0% 时完全透明,100%时无变化。值在 0% 和 100% 之间,则是效果的线性乘法,默认值是 1 。

      inital:设置该属性为默认值。

      inherit:从父元素继承该元素。

      .......

      以上为一部分函数功能,可以点击连接查看更详细的相关功能。

            https://www.runoob.com/cssref/css3-pr-filter.html

       https://developer.mozilla.org/ru/docs/Web/CSS/filter

                

  

 

 

 

你可能感兴趣的:(CSS实现网页变灰的效果)