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> ...
Si desea saber más, le proponemos el siguiente libro:
couv_RIT35HTM.png
60-signet.svg
Versión impresa
20-ecran_lettre.svg
Versión online
41-logo_abonnement.svg
En ilimitado con la suscripción ENI
130-boutique.svg
En la tienda oficial de ENI
Anterior
Filtros gráficos
Siguiente
Ceñir texto