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.

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket