Bolehkah Anda Menggayakan Imej Latar Belakang SVG dengan CSS?

Menggayakan Imej Latar Belakang SVG melalui CSS

Bolehkah anda menggayakan SVG apabila digunakan sebagai imej latar belakang menggunakan fail CSS yang sama di mana ia ditetapkan sebagai latar belakang?

Walaupun anda berjaya meletakkan, menskala dan menggunting imej SVG (secara individu atau sebagai sprite), menggayakan SVG dalam fail CSS yang sama yang menetapkannya sebagai imej latar belakang adalah tidak boleh dilaksanakan.

Pertimbangkan kod pseudo-CSS berikut, yang bertujuan untuk mengubah warna bentuk berdasarkan kelas elemen induknya:

element1 {
    background-image(icon.svg);
}

element1.black .svg-pathclass {
    fill: #000000;
}

element1.white .svg-pathclass {
    fill: #ffffff;
}

Pendekatan ini, yang menganggap SVG mengandungi laluan dengan "svg-pathclass " kelas, tidak boleh dilaksanakan.

Sebabnya terletak pada sifat SVG dan CSS. SVG ialah dokumen kendiri yang boleh disediakan dalam URI data atau dirujuk secara luaran. Setelah digunakan sebagai imej latar belakang dalam fail lain, ia menjadi imej tidak berubah yang tidak boleh diubah suai oleh CSS.

Atas ialah kandungan terperinci Bolehkah Anda Menggayakan Imej Latar Belakang SVG dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!