Enmascaramiento CSS: la propiedad de imagen de máscara

Tabla de contenido

    Mostrar tabla de contenidos

Con la máscara CSS creas una capa de máscara para colocar sobre una elemento para ocultar parcial o totalmente partes del elemento.

La propiedad de imagen de máscara CSS

La propiedad CSS mask-image especifica una máscara capa imagen.

La imagen de la capa de máscara puede ser una imagen PNG, una imagen SVG, un degradado CSS o un Elemento SVG .

Soporte del navegador

Nota: La mayoría de los navegadores solo admiten parcialmente CSS. enmascaramiento. Deberá utilizar el prefijo -webkit- además del estándar propiedad en la mayoría de los navegadores.

Los números de la siguiente tabla especifican la primera versión del navegador que admite totalmente la propiedad. Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.

Property
mask-image 4.0 -webkit- 79.0 -webkit- 53.0 4.0 -webkit- 15.0 -webkit-

Usar una imagen como capa de máscara

Para usar una imagen PNG o SVG como capa de máscara, use un valor url() para pasar la máscara imagen de capa.

La imagen de la máscara debe tener un área transparente o semitransparente. Negro indica totalmente transparente.

Aquí está la imagen de máscara (una imagen PNG) que usaremos:

W3Schools.com

Aquí una imagen de Cinque Terre, en Italia:

Cinque Terre

Ahora, aplicamos la imagen de máscara (la imagen PNG de arriba) como capa de máscara para la imagen de Cinque Terre, Italia:

Cinque Terre

Ejemplo

Aquí está el código fuente:

 .mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: 
  url(w3logo.png);
  
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat; 
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;    
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An image with a mask layer image:</h3>
<div class="mask1">
<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>
</html>

Ejemplo explicado

La propiedad mask-image especifica la imagen para ser utilizado como capa de máscara para un elemento.

La propiedad mask-repeat especifica si y cómo Se repetirá una imagen de máscara. El sin repetición El valor indica que la imagen de la máscara no se repetirá (la imagen de la máscara sólo se mostrará una vez).

Otro ejemplo

Si omitimos la propiedad mask-repeat, la imagen de la máscara se repetirá en toda la imagen de Cinque Terre, Italia:

Cinque Terre

Ejemplo

Aquí está el código fuente:

 .mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: 
  url(w3logo.png);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An image with a mask layer image:</h3>
<div class="mask1">
<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>
</html>

Utilice degradados como capa de máscara

Los degradados lineales y radiales de CSS también se pueden utilizar como imágenes de máscara.

Ejemplos de gradientes lineales

Aquí, utilizamos un degradado lineal como capa de máscara para nuestra imagen. Este degradado lineal va de arriba (negro) a abajo (transparente):

Cinque Terre
 

Ejemplo

Utilice un degradado lineal como capa de máscara:

   .mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, 
    transparent);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A linear gradient as a mask layer:</h3>
<div class="mask1">
<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>
</html>

Aquí, utilizamos un degradado lineal junto con una máscara de texto como capa de máscara para nuestra imagen:

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

Ejemplo

Utilice un degradado lineal junto con una máscara de texto como capa de máscara:

   .mask1 {
  max-width: 600px;
  height: 350px;
  
    overflow-y: scroll;
  background: url(img_5terre.jpg) no-repeat;
  
    -webkit-mask-image: linear-gradient(black, transparent);
  
    mask-image: linear-gradient (black, transparent);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-size: 20px;
  padding: 20px;
  color: white;
}
.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(img_5terre.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A linear gradient as a mask layer:</h3>

<div class="mask1">
<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>

<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>

<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
</div>

</body>
</html>

Ejemplos de gradientes radiales

Aquí, utilizamos un degradado radial (con forma de círculo) como capa de máscara para nuestra imagen:

Cinque Terre

Ejemplo

Utilice un degradado radial como capa de máscara (un círculo):

   .mask2 {
  -webkit-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%);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
.mask2 {
  -webkit-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%);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A radial gradient as a mask layer (a circle):</h3>
<div class="mask2">
<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>
</html>

Aquí, utilizamos un gradiente radial (con forma de elipse) como capa de máscara para nuestra imagen:

Cinque Terre

Ejemplo

Utilice otro degradado radial como capa de máscara (una elipse):

   .mask3 {
  -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 
    0, 0, 0.5) 50%);
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 
    0, 0.5) 50%);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
.mask3 {
  -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A radial gradient as 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>
</html>

Utilice SVG como capa de máscara

El elemento SVG <mask> se puede utilizar dentro de un Gráfico SVG para crear efectos de enmascaramiento.

Aquí, usamos el elemento SVG <mask> para crear diferentes capas de máscara para nuestra imagen:

Sorry, your browser does not support inline SVG.

Ejemplo

Una capa de máscara SVG (formada como un triángulo):

   <svg width="600" height="400">
  <mask id="svgmask1">
    
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  
    </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" 
    xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as a triangle):</h3>
<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>
Sorry, your browser does not support inline SVG.

Ejemplo

Una capa de máscara SVG (formada como una estrella):

   <svg width="600" height="400">
  <mask id="svgmask2">
    
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 
    160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" 
    xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
    </svg>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as a star):</h3>
<svg width="600" height="400">
  <mask id="svgmask2">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>
Sorry, your browser does not support inline SVG.

Ejemplo

Una capa de máscara SVG (formada como círculos):

   <svg width="600" height="400">
  <mask 
    id="svgmask3">
    <circle fill="#ffffff" cx="75" cy="75" 
    r="75"></circle>
    <circle fill="#ffffff" cx="80" 
    cy="260" r="75"></circle>
    <circle fill="#ffffff" 
    cx="270" cy="160" r="75"></circle>
  </mask>
  <image 
    xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" 
    mask="url(#svgmask3)"></image>
</svg>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as circles):</h3>
<svg width="600" height="400">
  <mask id="svgmask3">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask3)"></image>
</svg>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Propiedades de enmascaramiento CSS

La siguiente tabla enumera todas las propiedades de enmascaramiento CSS:

mask-image

Especifica una imagen que se utilizará como capa de máscara para un elemento.

mask-mode

Especifica si la imagen de la capa de máscara se trata como una máscara de luminancia o como una máscara alfa

mask-origin

Especifica la posición de origen (el área de posición de la máscara) de una capa de máscara. imagen

mask-position

Establece la posición inicial de una imagen de capa de máscara (en relación con la máscara área de posición)

mask-repeat

Especifica cómo se repite la imagen de la capa de máscara.

mask-size

Especifica el tamaño de una imagen de capa de máscara.