'清明时节雨纷纷' 关于web网站主题置灰

今天过清明了,全国人民为在疫情中逝去的和在火灾中以及其他各个灾难中逝世的人们默哀…

国家降半旗、默哀、电视剧停播、网站和app换上了庄重的灰色。

今天想要说的是关于网站变换主题。

1.CSDN

1)csdn首先取消了body元素的背景图片(卸下所有背景相关属性),让网页主体背景恢复为默认的白色。background: 0 0!important;

2)使用了滤镜功能(这和我一开始想的做法一样)

给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);
}

2.baidu

baidu也是使用了filter样式,只不过他只给id为result_logo的logo添加了这个样式。

3.然后我发现有道笔记的md文件代码样式也前部变灰??不知道是错觉还是他们把代码样式的颜色置灰了…(是错觉)

4.qq音乐网站也是用的filter,然后推荐了一些关于疫情的歌曲,封面选用了灰色的图片; qq音乐app也90%的部分变灰(还残留部分原谅色),APP上应该只是替换了一些灰色图片,其他的没有变化,毕竟纯ios或者Android使用滤镜功能比较繁琐。不过采用内嵌web的方式再使用filter应该也能行。

综上觉得使用css的滤镜功能是最方便快捷的方法。

filter相关属性值:

filter: none | blur() 高斯模糊 | brightness() 亮度| contrast() 对比度| drop-shadow() 阴影效果 | grayscale() 灰度 | hue-rotate() 色相旋转| invert() 反转| opacity() 透明度 | saturate() 饱和度 | sepia() 深褐色| url() 指定一个具体的滤镜元素;

例如:

/*变亮:*/
  -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
   filter: brightness(200%);
/*阴影效果:*/
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
 filter: drop-shadow(8px 8px 10px red);
/*上述的灰度:*/
 -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
 filter: grayscale(50%);
/*饱和度:*/
 -webkit-filter: saturate(800%); /* Chrome, Safari, Opera */
 filter: saturate(800%);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值