Total Pageviews

Sunday, 29 September 2024

CSS代码实现网站变成全灰色


为了表示对重庆东方之星客轮长江翻沉事故中遇难者哀悼,腾讯网整个网站显示成全灰色。看了下腾讯网的源代码,实现很简单,在CSS样式表中加入全局webkit-filter: grayscale灰度值即可,同时考虑不同浏览器的兼容性。

CSS代码如下:

<style>

body *{

-webkit-filter: grayscale(100%); /* webkit */

-moz-filter: grayscale(100%); /*firefox*/

-ms-filter: grayscale(100%); /*ie9*/

-o-filter: grayscale(100%); /*opera*/

filter: grayscale(100%);

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 

filter:gray; /*ie9- */

}

</style>

No comments:

Post a Comment