Bagaimana Skala Imej dalam CSS :before/:after Pseudo-Elements?

Menskalakan Imej dalam CSS :before/:after Pseudo-Elements

Menghiasi pautan dengan imej menggunakan pseudo-element menawarkan daya tarikan visual yang dipertingkatkan. Walau bagaimanapun, apabila dimensi imej tidak sejajar dengan teks pautan, timbul keperluan untuk mengubah suai ketinggian imej.

Sintaks untuk Penskalaan Ketinggian Imej

Tidak seperti imej latar belakang, imej elemen pseudo boleh diskalakan menggunakan sifat saiz latar belakang. Walau bagaimanapun, ini memerlukan penentuan lebar dan ketinggian blok yang mengandungi.

CSS yang diperbetulkan ialah:

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px;
    height: 20px;
    content: "";
}

Dalam kod ini:

• latar belakang- saiz: 10px 20px; skalakan imej kepada 10px lebar dan 20px tinggi.
• paparan: inline-block; memastikan elemen pseudo berkelakuan sebagai elemen sebaris.
• lebar: 10px; ketinggian: 20px; tentukan dimensi blok yang mengandungi.
• kandungan: ""; menyembunyikan sebarang kandungan lalai dalam elemen pseudo.

Keserasian

Rujuk Jadual Keserasian MDN untuk mendapatkan butiran sokongan merentas pelbagai penyemak imbas.

Atas ialah kandungan terperinci Bagaimana Skala Imej dalam CSS :before/:after Pseudo-Elements?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!