- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
P粉2580834322023-08-15 16:48:02
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,<svg ... > ... </svg>");
}
Anda perlu memastikan kandungan SVG (iaitu aksara seperti <svg> ... </svg>之间的所有内容）不包含可能与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):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Background</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="my-element">
<!-- Your content here -->
</div>
</body>
</html>
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.