x
<html><head><style>.mask1 { mask-image: linear-gradient(black, transparent); mask-image: linear-gradient(black, transparent);}.mask2 { mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%); mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);}.mask3 { mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5) 50%); mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5));}</style></head><body><h1>The mask-image Property</h1><h3>An image with a mask layer (from top to bottom):</h3><div class="mask1"><img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400"></div><h3>An image with a mask layer (a circle):</h3><div class="mask2"><img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400"></div><h3>An image with a mask layer (an ellipse):</h3><div class="mask3"><img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400"></div><h3>Original image:</h3><img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400"></body><!-- Mirrored from www.w3schools.com/cssref/tryit.php?filename=trycss3_mask-image1 by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 21 Dec 2022 17:37:31 GMT --></html>