在CSS中使用PNG剪輯

Question

有沒有辦法使用圖像疊加剪輯div的內容？

我試圖使用：background-clip和類似的東西，但似乎無法弄清楚！

這裏看到：

https://codepen.io/brycesnyder/pen/pwdoWW

我只希望可以在灰度圖像區域內顯示紅色。

Answer 1

我想通了實驗技術。

爲了利用圖像爲各種事情剪切路徑，你可以使用屬性：「面具」

在這裏看到： https://developer.mozilla.org/en-US/docs/Web/CSS/mask

雖然，你需要將它的前綴。

Answer 2

找到確切的形狀需要一點點調整，但您可以使用這裏的原理 - https://css-tricks.com/examples/ShapesOfCSS/ - 特別是邊框寬度和邊框半徑屬性 - 來「塑造」div。

如果我是你，我會用組合開始：

• 鑽石
• 雞蛋
• 錐

（即顯示在該共享/ CSS的所有形狀上面的css-tricks鏈接。）