开发者社区> 嗯哼9925> 正文

阿里云APP内打开

【CSS Demo】网站页面变灰

2017-11-16 1047

简介：

+关注继续查看

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

实现效果（点击下面的按钮）：

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

其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 demo网站 oss源码demo demo页面 demo oss问题

开发者社区 > 开发与运维 > 文章

作者高分内容

GNU make manual 翻译( 九十七) 1565 对PostgreSQL数据库的hstore类型建立GisT索引的实验 2178 PostgreSQL参数学习：max_wal_senders 2533 Oracle数据库无法向listener注册的解决一例 1527 [Spark][Python]PageRank 程序 2044

努力滴码农

css 选择器学习笔记

53 0

答案命运

面试官：请说下CSS选择器优先级

71 0

淡若栀子花

CSS 选择器详解

3733 0

sullay

前端学习笔记（8）css选择器（二）

选择器分类简单选择器：针对某一特征判断是否选中元素。复合选择器：连续的简单选择器，根据元素特征判断是否选中单个元素。复杂选择器：由“（空格）“ “ >” “ ~” “ +” “ ||” 等符号连接的复合选择器，根据父元素或者前序元素检查单个元素。

741 0

扬朋

CSS样式中选择器失效问题

对于怎么排查样式失效: 1. 学会使用小程序开发者工具提供的小程序调试工具和Chrome调试工具来排查原因（这会很大程度上减少排查问题的时间）； 2. 首先需要确认标签有可能使用什么来作为样式选择器，最常用的是标签、class、id，确认是否设置了相应的属性； 3.

984 0

awbeci

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

yuanrengu

CSS中的选择器总结

主要应用的选择器就三类：元素选择器，ID选择器，类选择器。选择器的结合关系有三种：后代结合、子元素结合、相邻兄弟结合。元素选择器就是以html文档中的标准元素标签作为选择器的标志的。如： h1 {color:red; font-size:14px;} ID选择器，以元素的唯一ID作为选择器标志。

630 0

double2li

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

+关注

嗯哼9925

4715

文章

问答

作者高分内容

文章排行榜

最热