美文网首页
全国哀悼日网站背景图片变灰色css3样式

全国哀悼日网站背景图片变灰色css3样式

作者: demoxjl | 来源:发表于2020-04-08 10:09 被阅读0次

css3属性filter设置,IE不兼容

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

IE浏览器使用grayscale.js,配合样式可以使界面变成灰色

html{
  filter: gray;
  color: gray;
}
<script src="grayscale.js"></script>
<script>
    grayscale(document.getElementsByTagName('html'));
</script>

filter的其他滤镜效果

    filter: blur(5px); //高斯模糊
    filter: contrast(0.5);//调整图像的对比度,100%图像不变,0%变黑,值0%-100%,浮点数0-1
    filter: brightness(%);//给图片设置一种线性乘法,让图像看起来更亮或更黑,可以超过1,默认1
    filter: hue-rotate(deg);//给图像用色相旋转0-360deg,超出360,又回到原来的色相值了
    filter: invert(%); //反转输入图像,100%则完全反转
    filter: opacity(%); //图像透明度
    filter: saturate(%);//转换图像饱和度,可以超出100%
    filter: sepia(%);//将图像转换为深褐色,0-100%
    filter: url(svg-url#element-id);//接收一个xml文件,文件设置一个svg滤镜,可以包含一个锚点来指定一个具体的滤镜元素

相关文章

  • 全国哀悼日网站背景图片变灰色css3样式

    css3属性filter设置,IE不兼容 IE浏览器使用grayscale.js,配合样式可以使界面变成灰色 fi...

  • 4月4日网站整体变为灰色

    因为新冠肺炎疫情,国务院下达:4月4日举行全国性哀悼活动。网站整体变为灰色,代码实现: CSS 整个网页变灰色调

  • 哀悼日-网站变灰色代码

    方法一: 方法二: 有一些站长的网站可能使用这个css 不能生效,是因为网站没有使用最新的网页标准协议。将网页最头...

  • 整个网站变灰css样式

    4月4日举行全国哀悼,致敬英雄,缅怀英烈。各大网站和视屏都在变灰,于是我也学习了一下css样式,向英雄致敬! ht...

  • 清明疫情哀悼日

    明天是清明节啦,是全国哀悼日,哀悼疫情期间的逝者,大家记得把头像调成灰色呀。微博小秘书的头像已经变成灰色啦,新闻头...

  • iOS - App全局灰色调

    iOS - App全局灰色调 在一些节日或者哀悼日,需要App全局变灰(或部分页面变灰色),此方法iOS13及以上...

  • iOS - App一键全局变灰

    IMYAppGrayStyle 在哀悼日部分App需要全局变灰(部分页面变为灰色模式),这边使用了 layer 叠...

  • 哀悼,祈福,把网站整体变灰色的做法

    在网站css样式中添加如下代码: html{ filter: grayscale(100%);//IE浏览器 -w...

  • 制作灰色网站样式

    html中写入-webkit-filter: grayscale(.95); 各大浏览器的兼容性 -moz-fil...

  • 全国哀悼日

    今天是全国哀悼日,很多网页打开来都是灰色的,为了缅怀那些英雄和同胞,很多娱乐活动都暂停了。 2020年应该是一个崭...

网友评论

      本文标题:全国哀悼日网站背景图片变灰色css3样式

      本文链接:https://www.haomeiwen.com/subject/pkhzphtx.html