Superposiciones CSS

Con CSS de máscara, puede crear una capa de máscara y colocarla en el elemento para ocultar parcialmente o completamente ciertas partes del elemento.

propiedad mask-image

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

La imagen de capa de máscara puede ser una imagen PNG, una imagen SVG,Gradiente de CSS o Elemento <mask> de SVG.

Compatibilidad del navegador

Los números en la tabla a continuación indican la primera versión del navegador que admite completamente la propiedad.

con -webkit- El número del prefijo indica la primera versión que admite ese prefijo.

Uso de imagen como capa de máscara

Para usar una imagen PNG o SVG como capa de máscara, utilice url() Valor de paso de la imagen de capa de máscara.

La imagen de máscara debe tener áreas transparentes o semitransparentes. El negro representa la transparencia completa.

Esta es la imagen de máscara que utilizaremos (imagen PNG):

Esta es la imagen de las Cinque Terre italiana:

Ahora, aplicaremos la imagen de máscara (la imagen PNG superior) como capa de máscara de la imagen de las Cinque Terre italiana:

Ejemplo

A continuación, se muestra el código fuente:

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

Prueba por ti mismo

Ejemplo de explicación

mask-image La propiedad especifica la imagen que se utiliza como capa de máscara del elemento.

mask-repeat La propiedad especifica si la imagen de máscara se repetirá o cómo se repetirá. El valor no-repeat indica que la imagen de máscara no se repetirá (la imagen de máscara solo se mostrará una vez).

otro ejemplo

Si omitimos mask-repeat La propiedad, la imagen de máscara se repetirá en toda la imagen de Wuyuan:

Ejemplo

A continuación, se muestra el código fuente:

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

Prueba por ti mismo

Se utiliza una transición como capa de máscara

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

Ejemplo de transición lineal

Aquí, utilizamos una transición lineal como capa de máscara de la imagen. Esta transición lineal va desde la parte superior (negro) hasta la parte inferior (transparente):

Ejemplo

Se utiliza una transición lineal como capa de máscara:

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

Prueba por ti mismo

Aquí, utilizamos una transición lineal y una máscara de texto como capa de máscara de la imagen:

Ejemplo

Se utiliza una transición lineal y una máscara de texto como capa de máscara:

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

Prueba por ti mismo

Ejemplo de transición radial

Aquí, utilizamos una transición radial (de forma circular) como capa de máscara de la imagen:

Ejemplo

Se utiliza una transición radial como capa de máscara (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%);
}

Prueba por ti mismo

Aquí, utilizamos un gradiente radial (en forma de elíptico) como capa de superposición para la imagen:

Ejemplo

Utilice otro gradiente radial como capa de superposición (elíptico):

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

Prueba por ti mismo

Uso de SVG como capa de superposición

El elemento <mask> de SVG se puede utilizar dentro de los gráficos SVG para crear efectos de superposición.

Aquí, utilizamos el elemento <mask> de SVG para crear diferentes capas de superposición para las imágenes:

Ejemplo

Una capa de superposición SVG (en forma de 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="wuhan.jpg" mask="url(#svgmask1)"></image>
</svg>

Prueba por ti mismo

Ejemplo

Una capa de superposición SVG (en forma de 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="wuhan.jpg" mask="url(#svgmask2)"></image>
</svg>

Prueba por ti mismo

Ejemplo

Una capa de superposición SVG (en forma de círculo):

<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="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>

Prueba por ti mismo