Las imágenes SVG también se pueden usar como background-imageen CSS, al igual que PNG, JPG.webp o GIF.
.element ( background-image: url(/images/image.svg); )La misma genialidad 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 rasterizado, 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. Vimos este efecto en HTML5Hub.
Vea el Pen GAekv de Chris Coyier (@chriscoyier) en CodePen.
Archivos
- 06-rip.svg