06: Używanie SVG - SVG jako obrazu tła - CSS-Tricks

Obrazy SVG mogą być używane tak jak background-imagew CSS, podobnie jak PNG, JPG.webp lub GIF.

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

Cała ta sama niesamowitość SVG pojawia się podczas jazdy, jak elastyczność przy zachowaniu ostrości. Ponadto możesz zrobić wszystko, co potrafi grafika rastrowa, na przykład powtórzyć.

W tym nagraniu wideo przyjrzymy się zastosowaniu efektu „zgranej krawędzi papieru” na spodzie modułu za pomocą obrazu tła na pseudoelemencie. To całkiem zgrabny sposób na zrobienie tego, aby sam główny element mógł mieć jednolity kolor tła, który możemy dopasować, i pozwolić, aby tło strony przenikało przez ujemną przestrzeń w SVG. Do tego nie potrzeba żadnych znaczników. Widzieliśmy ten efekt w HTML5Hub.

Zobacz Pen GAekv autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.