作者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/m.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