css实现网站整体变灰颜色

2021-12-05 0 803

为了达到这个页面效果,我们需要使用一个css过滤属性:filter。

可以在一个 DOM 节点上设置样式变化属性,实现整个网页的灰色效果,也可以设置为全局效果,还可以在 html 节点上设置属性。

有时候我们可能需要把整个网站灰化,实现方法很简单。将以下代码添加到wordpress主题目录中的style.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);}

 

收藏 (0)

微信扫一扫

支付宝扫一扫

点赞 (0)

免责声明

本资源仅限个人学习与研究使用,严禁用于任何商业用途!

1 网站名称:汇站网
2 永久网址:https://www.huizhanii.com
3 本站资源来源于网友投稿和付费购买,仅供编程人员及源代码爱好者下载参考与研究,不提供任何技术支持服务!
4 资源展示图片及相关信息仅供参考,不代表本站立场!本站仅作为信息存储平台
5 禁止在服务器和虚拟机上搭建运营,所有资源仅限本地调试与研究使用,不支持联网运行!
6 未经版权方授权,严禁用于商业用途。使用者如违反国家法律法规,需自行承担全部法律责任!
7 请在下载后24小时内删除!建议支持正版授权作品
8 如资源侵犯您的合法权益,请提供版权证明及相关作品信息发送至邮箱:972908224@qq.com,我们将及时处理
9 如遇下载链接失效或支付未到账,请联系站长处理
10 欢迎投稿优质源码或教程,审核通过后将获得相应奖励
11 资源收费仅用于维持网站正常运营
12 数字商品具有特殊性质,一经购买概不退款

汇站网 技术分享 css实现网站整体变灰颜色 https://www.huizhanii.com/21182.html

站长资源下载中心-找源码上汇站

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

联系官方客服

为您解决烦忧 - 24小时在线 专业服务