【背景】
全局主题置灰需求，采用 filter: grayscale(1); 实现。
在实际应用过程中，发现了一些坑点。
记录分享，希望对你有些许帮助。
1、配置了 css filter 属性的元素，其子元素的 fixed 定位会失效。
【原因】
filter 会影响 fixed 的定位参照。由相对视口改为相对设置了 filter 的祖先。
【解决方案】
web端： 将 filter 设置在 html 上即可。
小程序：需逐个元素排查，确保设置了 filter 的元素，不包含存在 fixed 定位的子元素。
2、配置了 css filter 属性的元素，z-index会被提升，可能会覆盖掉其他有定位元素
【解决方案】
注意调整 z-index 层级。
【背景】 全局主题置灰需求，采用 filter: grayscale(1); 实现。 在实际应用过程中，发现了一些...
CSS filter 我们首先来探讨一下filter。 首先来说明一下filter，在CSS里面要实现filter...
filter是个神奇的东西，css中有filter属性，js里也有filter属性，vue也用filter做过滤器...
filter是个神奇的东西，css中有filter属性，js里也有filter属性，vue也用filter做过滤器...
filter是个神奇的东西，css中有filter属性，js里也有filter属性，vue也用filter做过滤器...
1.CSS静态滤镜样式 (filter)(只有IE4.0以上支持) CSS静态滤镜样式的使用方法:{ filter...
CSS3滤镜filter: filter CSS属性将模糊或颜色偏移等图形效果应用于元素。 盒子宽度calc函数 ...
滤镜filter filter CSS属性将模糊或颜色偏移等图形效果应用于元素 用法 filter: 函数(); ...
【css学习】色调旋转滤镜实现按钮颜色设置 CSS filter:hue-rotate css代码 html
利用CSS的 filter: grayscale(1) 使用 filter 属性对元素应用滤镜效果的方法，匹配 S...
本文标题：css filter 的坑
本文链接：https://www.haomeiwen.com/subject/ahypxdtx.html
网友评论