网站变成灰色的代码
2013-04-23 22:02
246 查看
IE浏览器中用了滤镜来解决
chrome下
IE+火狐+chrome
大面积的操作降低页面性能是肯定的,这里分享这个也只是想跟大家说一下,最近我看到这个样式,感觉太厉害了。在这个样式代码中,涉及到了一个文件,就是desaturate.svg,从文件扩展名中可以看到,利用到了SVG技术了,代码如下:
只需要将这代码保存为desaturate.svg,再通过url链接就可以了,十分简单。在前面看到的demo页面中是在body中增加了样式,影响页面中所有的元素,如果有需要的话,可以单独设置一个公共库中的类名来调用,如:
完美兼容,或者直接在css里添加:
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
chrome下
-webkit-filter: grayscale(100%);
IE+火狐+chrome
html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(desaturate.svg#grayscale);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}
大面积的操作降低页面性能是肯定的,这里分享这个也只是想跟大家说一下,最近我看到这个样式,感觉太厉害了。在这个样式代码中,涉及到了一个文件,就是desaturate.svg,从文件扩展名中可以看到,利用到了SVG技术了,代码如下:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="grayscale"> <fecolormatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg>
只需要将这代码保存为desaturate.svg,再通过url链接就可以了,十分简单。在前面看到的demo页面中是在body中增加了样式,影响页面中所有的元素,如果有需要的话,可以单独设置一个公共库中的类名来调用,如:
.pic_gray {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(desaturate.svg#grayscale);
filter: gray;
-webkit-filter: grayscale(1);
}
完美兼容,或者直接在css里添加:
<style type="text/css"> html{filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(1);} </style>
相关文章推荐
- 国家哀悼日将网站全部变成灰色的代码
- 主题:网站变成灰色,纪念日代码@IE下
- 主题:网站变成灰色,纪念日代码@IE下
- 请把本段代码拷贝到您的CSS文件中,让你的网站变成灰色以纪念逝去的人们。
- 请把本段代码拷贝到您的CSS文件中,让你的网站变成灰色以纪念逝去的人们。
- 网站变成灰色css代码
- 网站变成灰色的代码
- 网站变成灰黑色 css 代码
- 让网页变成灰色代码
- 如何让整个网站变成灰色
- 灰色星期一,网站变灰白风格CSS代码
- 把一个网站变成灰色的方法。
- 怎样把网站变为灰色的代码
- 全国哀悼日网站页面变成灰色的filter方法
- 注册程序中不同意则按钮submit变成灰色,无法提交的代码
- 全国哀悼日网站页面变成灰色的filter方法
- 各网站变黑白网页方法及代码 网页变黑白 网页变成黑白 网页黑白代码 为什么网页是黑白的 网页是黑白的
- 网站变成灰黑色 css 代码
- 网站变成灰色@IE
- 让网页变成灰色,CSS代码