开发者社区> 嗯哼9925> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【CSS Demo】网站页面变灰

简介:
+关注继续查看

让网站所有元素变成灰色调,全浏览器支持,使用了滤镜,比较吃性能,建议作临时方案使用。

实现效果(点击下面的按钮):

这里放一张图片作为效果展示:

其CSS代码如下:

复制代码
body{
  -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:gray;
  -webkit-transform: translateZ(0);
}
复制代码





本文转自叶超Luka博客园博客,原文链接:http://www.cnblogs.com/yc-755909659/p/6374228.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
css 选择器学习笔记
css 选择器学习笔记
53 0
面试官:请说下CSS选择器优先级
面试官:请说下CSS选择器优先级
71 0
CSS 选择器详解
CSS 选择器详解
3733 0
前端学习笔记(8)css选择器(二)
选择器分类 简单选择器:针对某一特征判断是否选中元素。 复合选择器:连续的简单选择器,根据元素特征判断是否选中单个元素。 复杂选择器:由“(空格)“ “ >” “ ~” “ +” “ ||” 等符号连接的复合选择器,根据父元素或者前序元素检查单个元素。
741 0
CSS样式中选择器失效问题
对于怎么排查样式失效:    1. 学会使用小程序开发者工具提供的小程序调试工具和Chrome调试工具来排查原因(这会很大程度上减少排查问题的    时间);    2. 首先需要确认标签有可能使用什么来作为样式选择器,最常用的是标签、class、id,确认是否设置了相应的属性;    3.
984 0
CSS 选择器
table tbody td:first-child { text-align: left; } .table tbody tr td + td { text-align: center; } table tbody tr:nth-child(even) { ...
542 0
CSS中的选择器总结
主要应用的选择器就三类:元素选择器,ID选择器,类选择器。 选择器的结合关系有三种:后代结合、子元素结合、相邻兄弟结合。 元素选择器就是以html文档中的标准元素标签作为选择器的标志的。如: h1 {color:red; font-size:14px;}   ID选择器,以元素的唯一ID作为选择器标志。
630 0
CSS 选择器的优先级顺序
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
655 0
Css选择器命名规则
操作系统版本:Windows 7 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev 受影响的浏览器:所有浏览器. 经常讲到css选择器命名规则,其实不只是在团队合作基础上来讲这个,每个浏览器,IE产品,火狐,苹果,谷歌,都会因为命名不规范会产生不同样式.
823 0
网站安全对SEO排名的影响
网站安全性如何对SEO排名产生负面影响 “网站安全” – 让我们说实话:你最后一次认真思考这个问题的时间是什么时候?您或您的SEO团队最后一次在网站的最新安全趋势上花了极少的时间? 所有公司目前可能在搜索引擎优化上花费了数百亿元,但很大一部分拥有网站的企业甚至都没有考虑网站的安全性。
1702 0
+关注
4715
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载