Gunakan SVG sebagai imej latar belakang

Question

Bagaimana untuk menggunakan SVG sebagai imej latar belakang dalam CSS? Saya cuba menggunakannya, tetapi saya keliru. Saya tahu ia sepatutnya dalam format CSS tetapi bagaimana saya melakukan ini

P粉258083432 · Answer

Sudah tentu! Sangat mudah untuk menggunakan SVG sebagai imej latar belakang dalam HTML dan menetapkannya melalui CSS. Saya akan menyediakan anda dengan langkah-langkah.

Sertakan SVG terus dalam CSS:

Jika anda mempunyai kod SVG, anda boleh membenamkannya terus ke dalam CSS menggunakan URL data. Contohnya:

.my-element {
    background-image: url("data:image/svg+xml,");
}

Anda perlu memastikan kandungan SVG (iaitu aksara seperti 之间的所有内容）不包含可能与CSS语法冲突的任何字符。这包括像#，"或; Anda boleh mengekodkan URL aksara ini untuk mengelakkan masalah

).

Gunakan fail SVG sebagai latar belakang:

Jika kandungan SVG anda berada dalam fail berasingan, seperti background.svg, anda boleh merujuknya seperti mana-mana imej lain:

.my-element {
    background-image: url('path/to/your/background.svg');
}

Dilaksanakan dalam HTML dan CSS:

Ini adalah contoh mudah. Katakan anda menyimpan SVG anda dalam fail bernama background.svg:

HTML (index.html):




    
    
    SVG Background

CSS (styles.css):

.my-element {
    width: 300px;  /* or whatever size you want */
    height: 300px;
    background-image: url('background.svg');
    background-repeat: no-repeat;  /* this prevents the image from repeating */
    background-size: cover;  /* this scales the image to cover the div */
}

Nota:

Sentiasa ingat bahawa untuk memaparkan SVG, elemen (dalam kes ini my-element）应具有指定的width和height) atau kandungan yang mencukupi untuk memberikannya dimensi. Gunakan background-size，background-position dsb. untuk melaraskan kedudukan dan saiz latar belakang SVG yang anda mahukan. Sekarang apabila anda membuka latar belakang div index.html时，您应该看到SVG作为my-element.