[問題] CSS filter 的 Inherited

看板Web_Design作者 (4545454554)時間5年前 (2018/07/20 23:48), 5年前編輯推噓4(4推 0噓 5→)
留言9則, 4人參與, 5年前最新討論串1/1
各位好 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://www.ptt.cc/bbs/Web_Design/M.1532101717.A.49D.html
推
07/21 01:10, 5年前 , 1F
img確實沒有繼承到filter屬性
07/21 01:10, 1F
→
07/21 01:10, 5年前 , 2F
只是filter本身就會影響到內層的外觀
07/21 01:10, 2F
→
07/21 01:11, 5年前 , 3F
假如把img加上filter:grayscale(0%); 就會發現它依然是灰的
07/21 01:11, 3F
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
推
07/21 13:38, 5年前 , 4F
很怪是指？width, height 之類的屬性也會影響到內層
07/21 13:38, 4F
以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的效果與我預期的不同
推
07/21 14:18, 5年前 , 5F
filter這屬性的效果會影響內層的元素 但內層的元素並
07/21 14:18, 5F
→
07/21 14:18, 5年前 , 6F
不會因此繼承到filter這屬性
07/21 14:18, 6F
謝謝 是我少見多怪了 以為只要Inherited是no 就不會影響內層 但img加上filter:grayscale(0%)也不能覆寫上層的filter:grayscale(100%)設定 我還是覺得怪怪
推
07/22 01:14, 5年前 , 7F
一個 opacity 的例子︰
07/22 01:14, 7F
→
07/22 01:14, 5年前 , 8F
07/22 01:14, 8F
感謝 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
→
07/23 19:29, 5年前 , 9F
就像父層設display:none; 子元素也會跟著看不見一樣
07/23 19:29, 9F
‣ 更多 kisha024 的文章
文章代碼(AID): #1RKWHLIT (Web_Design)