页面全局变灰色和CSS3控制鼠标不可点击属性

最新推荐文章于 2024-07-16 22:03:32 发布

转载最新推荐文章于 2024-07-16 22:03:32 发布 · 663 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2949632/blog/1189226

文章标签：

#python

本文介绍了一种在特定状态下将网页变为灰色主题的方法，并通过CSS实现了列表项的视觉灰化效果及按钮的不可点击状态，同时保证了用户仍能查看详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

项目要求在一些页面某些状态下的列表要以灰色界面显示（像国家哀悼日出现的大部分主流网站都会变成灰色主题一样），并且该列表下的card按钮不可点，但可以点进去看详情。

一步步来吧，首先页面全局变灰色一搜百度关键字网站灰色主题一堆，关键CSS代码

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
}

控制已取消状态下的列表项变灰色（amazing！）

好了，当时这个状态下的项是不可点击的，我突发奇想就直接在每个项上蒙上一层蒙版，打算大功告成的时候，被组长告知可以点详情的，靠！无奈想了一些旧方法也不行的情况下，又百度找到了一种CSS3新属性可以解决（pointer-events：'auto/none';）元素永远不会成为鼠标事件的target,但子代也添加该属性有可能造成冒泡，这里不细说。