html中如何实现网站全部变灰色效果
这篇文章主要介绍了html中如何实现网站全部变灰色效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联公司,为您提供成都网站建设、重庆网站制作、网站营销推广、网站开发设计,对服务格栅板等多个行业拥有丰富的网站建设及推广经验。成都创新互联公司网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈,认真对待每位客户,为客户提供赏心悦目的作品。 与客户共同发展进步,是我们永远的责任!
1、直接body中加入代码即可
实现这种效果很简单,只需要一句css代码:filter: grayscale(100%);,将其放到body元素的样式里面就行了。我们自己实现的效果:
2、直接在调用的css样式文件中,这样不用改html代码。
直接上代码:
/*网站变灰*/
html {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none;}
或下载的代码,推荐上面的代码
代码如下:
html{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
3、腾讯网的做法:
其他的一些方法:
1.网页黑白代码外部样式(写入*.css文件请用)
html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); }
2.网页黑白代码内部样式(写入头部head标签里面)
3.网页黑白代码内联式(写入html标签,找到html)
感谢你能够认真阅读完这篇文章,希望小编分享的“html中如何实现网站全部变灰色效果”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
标题名称:html中如何实现网站全部变灰色效果
分享URL:http://scyanting.com/article/jghcgg.html