如何使用PNG遮罩圖像的邊緣？

我用PNG的邊界圖像來創建粗糙的邊界，但我想知道是否有一種方法來掩蓋以類似的方式？如何使用PNG遮罩圖像的邊緣？

http://www.rumchata.com/

Rumchata做什麼我要找的。背景中的藍色gif具有粗糙的邊緣。我假設他們使用PNG紋理來掩蓋GIF的邊緣。有誰知道如何？

2017-07-03 Billy Boy

它不是一個GIF，這是一個視頻。只是爲了好玩：https：//jsfiddle.net/tLxexgw6/ –

您可以使用mask-image和-webkit-mask-image來掩蓋他們的做法。我在下面放了一個簡單的例子，裏面有棕櫚樹和一顆星星的圖片。如果你願意，你可以用視頻來做到這一點。

img { 
 
    -webkit-mask-image: url(https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png); 
 
    mask-image: url(https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png); 
 
    -webkit-mask-position: center center; 
 
    mask-position: center center; 
 
    -webkit-mask-repeat: no-repeat; 
 
    mask-repeat: no-repeat; 
 
}

<body> 
 
    <img src="http://polyadhawaiitours.com/blog/wp-content/uploads/2014/03/PalmTree1.jpg"> 
 
</body>

來源

2017-07-03 07:45:30

如何使用PNG遮罩圖像的邊緣？

回答

相關問題