作者kisha024 (4545454554)
看板Web_Design
标题[问题] CSS filter 的 Inherited
时间Fri Jul 20 23:48:32 2018
各位好
CSS filter 的 Inherited 是 no 如下
https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Specifications
底下是我的测试
https://jsfiddle.net/k19wx6as/
如果filter的Inherited是no 那第三个div里面的<img>应该不受filter影响
但结果却不是这样 请问是MDN写错了吗？
还是说 Inherited不是这样解释的？
谢谢
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 36.236.87.24
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1532101717.A.49D.html
1F：推 Kenqr: img确实没有继承到filter属性 07/21 01:10
2F：→ Kenqr: 只是filter本身就会影响到内层的外观 07/21 01:10
3F：→ Kenqr: 假如把img加上filter:grayscale(0%); 就会发现它依然是灰的 07/21 01:11
1.filter的Inherited是no 却仍会影响到内层的外观
2.img加上filter:grayscale(0%)也不能覆写上层的filter:grayscale(100%)设定
谢谢 但上面这两点 我还是觉得很奇怪
请问 除了filter 还有其他的Keyword也是这样吗? 底下是Keyword index
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
4F：推 eight0: 很怪是指？width, height 之类的属性也会影响到内层 07/21 13:38
以border-color来说好了 他的Inherited也是no
https://developer.mozilla.org/en-US/docs/Web/CSS/border-color
这个例子
https://jsfiddle.net/p6qxygkh/3/
内层div没有受到外层div border-color的影响 所以不是红色
从这个角度来看 filter的效果与我预期的不同
5F：推 pkro12345: filter这属性的效果会影响内层的元素 但内层的元素并 07/21 14:18
6F：→ pkro12345: 不会因此继承到filter这属性 07/21 14:18
谢谢 是我少见多怪了 以为只要Inherited是no 就不会影响内层
但img加上filter:grayscale(0%)也不能覆写上层的filter:grayscale(100%)设定
我还是觉得怪怪
7F：推 eight0: 一个 opacity 的例子︰ 07/22 01:14
感谢 MDN也有提到 如下
opacity applies to the element as a whole, including its contents
, even though the value is not inherited by child elements.
https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
※ 编辑: kisha024 (60.248.143.145), 07/22/2018 13:14:53
9F：→ arym: 就像父层设display:none; 子元素也会跟着看不见一样 07/23 19:29