Wie verwende ich PNGs, um die Kanten eines Bildes zu maskieren?

Ich habe Rand-Bild mit PNGs verwendet, um grobe Grenzen zu erstellen, aber ich frage mich, ob es dort eine Möglichkeit gibt, in ähnlicher Weise zu maskieren?Wie verwende ich PNGs, um die Kanten eines Bildes zu maskieren?

http://www.rumchata.com/

Rumchata tut, was ich suche. Das blaue GIF im Hintergrund hat Ecken und Kanten. Ich nehme an, dass sie PNG-Texturen verwenden, um die Ränder des Gifs zu maskieren. Weiß jemand wie?

Quelle

2017-07-03 Billy Boy

es ist kein gif, es ist ein Video. nur zum Spaß: https://jsfiddle.net/tLxexgw6/ –

Sie können mask-image und -webkit-mask-image verwenden, um in der Weise zu maskieren, die sie getan haben. Ich habe unten ein einfaches Beispiel mit einem Bild von Palmen und einem Stern zusammengestellt. Sie können dies mit einem Video tun, wenn Sie möchten.

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>

Quelle

2017-07-03 07:45:30

Wie verwende ich PNGs, um die Kanten eines Bildes zu maskieren?

Antwort

Verwandte Themen