CSS3如何实现网页变成灰色模式

2025-10-08 09:38:21

1、在css中,如果我们想要让网页变成灰色模式,如何实现呢?下面小编举例讲解CSS3如何实现网页变成灰色模式,我们要使用到filter这个属性。

CSS3如何实现网页变成灰色模式

2、在test.html文件内,我们需要写入两张彩色的图片,<img src="005.jpg" ><img src="011.jpg" >。

CSS3如何实现网页变成灰色模式

3、编写css样式<style type="text/css"></style>标签,样式将写在该标签内。

CSS3如何实现网页变成灰色模式

4、在css样式标签里,在括号内,设置css属性样式为

html {

   filter: grayscale(100%);

  -webkit-filter: grayscale(100%);

  -moz-filter: grayscale(100%);

  -ms-filter: grayscale(100%);

  -o-filter: grayscale(100%);

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

  -webkit-filter: grayscale(1);

}

CSS3如何实现网页变成灰色模式

5、在浏览器浏览一下test.html,来看看效果能否实现。

CSS3如何实现网页变成灰色模式

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢