Índice

Máscaras

La propiedad CSS mask permite ocultar una parte de los elementos visuales aplicando una máscara o un degradado. Este efecto, que habitualmente realizan los programas gráficos, se implementa con una propiedad de estilo.

La propiedad mask forma parte del módulo CSS Masking Module Level 1. Este módulo se encuentra en estado Candidate Recommendation a 26 de agosto de 2014. De momento, MS Internet Explorer y Edge no reconocen esta propiedad y los demás navegadores solo la reconocen parcialmente mediante el uso de prefijos.

images/C22-004.png

Observe también que una máscara es una imagen PNG compuesta de píxeles y de transparencia.

Ejemplo 1

Ilustramos este efecto de máscara con la aplicación de una máscara (mask.png, ver a continuación). Recuerde que las imágenes y ejemplos están disponibles en el espacio de descarga dedicado a esta obra.

images/N21ri53.png
images/N21ri54.png

El código

<!DOCTYPE html>   
<html lang="es">   
<head>   
   <title>Html5</title>   
   <meta charset="UTF-8">    
   <style type="text/css">   
   .mascara{ -webkit-mask: url(mask.png) no-repeat center center;} 
   </style>   
</head>   
<body>   
<img class="mascara" src="marine.png" width="150" height="183"><br>  ...