06: Χρήση του SVG - SVG ως εικόνα φόντου - CSS-Κόλπα

Οι εικόνες SVG μπορούν επίσης να χρησιμοποιηθούν όπως και background-imageστο CSS, όπως PNG, JPG.webp ή GIF.

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

Όλη η απίστευτη αίσθηση του SVG έρχεται στη διαδρομή, όπως η ευελιξία διατηρώντας ταυτόχρονα την ευκρίνεια. Επιπλέον, μπορείτε να κάνετε οτιδήποτε μπορεί να κάνει ένα ράστερ γραφικό, όπως επανάληψη.

Σε αυτό το βίντεο εξετάζουμε την εφαρμογή ενός εφέ «σχισμένου χαρτιού» στο κάτω μέρος μιας μονάδας μέσω εικόνας φόντου σε ένα ψευδο στοιχείο. Είδος ενός τακτοποιημένου τρόπου για να το κάνουμε έτσι ώστε το κύριο στοιχείο να μπορεί να έχει ένα συμπαγές χρώμα φόντου που μπορούμε να ταιριάξουμε και να αφήσουμε το φόντο της σελίδας να ξεχειλίζει από τον αρνητικό χώρο στο SVG. Επιπλέον, δεν χρειάζεται σήμανση για να το κάνει. Είδαμε αυτό το αποτέλεσμα στο HTML5Hub.

Δείτε το Pen GAekv του Chris Coyier (@chriscoyier) στο CodePen.