06: Usando SVG – SVG como imagen de fondo | Programar Plus

← Vídeo anterior Vídeo siguiente →

Las imágenes SVG se pueden utilizar como background-image también en CSS, como PNG, JPG o GIF.

.element {
  background-image: url(/images/image.svg);
}

La misma maravilla de SVG viene para el viaje, como la flexibilidad mientras se conserva la nitidez. Además, puede hacer cualquier cosa que pueda hacer un gráfico de trama, como repetir.

En este video, vemos cómo aplicar un efecto de “borde de papel rasgado” a la parte inferior de un módulo a través de una imagen de fondo en un pseudo elemento. Una especie de forma ordenada de hacerlo para que el elemento principal en sí pueda tener un color de fondo sólido que podamos igualar y dejar que el fondo de la página se filtre a través del espacio negativo en el SVG. Además, no necesita ningún marcado para hacerlo.

Archivos

  • 06-rip.svg