Bolehkah saya Menggunakan Imej SVG sebagai Kandungan dalam elemen Pseudo CSS?

Memaparkan SVG sebagai Kandungan dalam Pseudo-Elements

Dalam CSS, pseudo-elemen seperti ::before dan ::after boleh meningkatkan elemen penampilan dengan menambah kandungan sebelum atau selepasnya. Walaupun kandungan teks biasanya digunakan, adakah mungkin untuk memaparkan imej SVG sebagai kandungan dalam elemen pseudo ini?

Untuk mencapai ini, nyatakan URL imej SVG sebagai nilai kandungan untuk elemen pseudo. Contohnya:

#test::before {
  content: url(path/to/your.svg);
  width: 200px;
  height: 200px;
}

Sebagai alternatif, anda boleh membenamkan SVG terus dalam CSS menggunakan sintaks xml data:image/svg:

#test::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180'>

Teknik ini membolehkan anda memasukkan SVG yang kompleks grafik ke halaman web anda menggunakan kuasa CSS.

Atas ialah kandungan terperinci Bolehkah saya Menggunakan Imej SVG sebagai Kandungan dalam elemen Pseudo CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!