Bolehkah CSS Pseudo-Elements Mengubah Saiz Imej?-tutorial css-php.cn

Bolehkah CSS Pseudo-Elements Mengubah Saiz Imej?

Linda Hamilton

Lepaskan： 2024-12-04 08:13:15

asal

516 orang telah melayarinya

Can CSS Pseudo-Elements Resize Images?

Bolehkah Pengubahsuaian Ketinggian Imej Dicapai dalam Unsur Pseudo CSS (:sebelum/:selepas)?

Dalam usaha untuk menyesuaikan penampilan jenis fail tertentu, pembangun boleh memasukkan imej sebagai elemen hiasan. Dengan memperuntukkan kelas kepada pautan, seperti , CSS boleh digunakan untuk memaparkan imej selepas itu:

.pdflink:after { content: url('/images/pdf.png') }

Salin selepas log masuk

Walaupun pendekatan ini berkesan menambah imej pada pautan , mengubah saiz imej berdasarkan teks pautan menjadi satu cabaran. Keupayaan untuk menskalakan imej dalam elemen pseudo telah menjadi persoalan lama dalam pembangunan web.

Kaedah tradisional untuk mengubah saiz imej latar belakang tidak boleh digunakan pada elemen pseudo. Walau bagaimanapun, beberapa sokongan untuk saiz semula imej boleh dicapai melalui sifat saiz latar belakang:

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

Salin selepas log masuk

Pendekatan ini melibatkan pelarasan saiz latar belakang sambil mentakrifkan lebar dan ketinggian blok sekeliling secara eksplisit. Adalah penting untuk ambil perhatian bahawa keserasian adalah terhad untuk teknik ini. Jadual Keserasian MDN menyediakan butiran lanjut tentang sokongan penyemak imbas.

Atas ialah kandungan terperinci Bolehkah CSS Pseudo-Elements Mengubah Saiz Imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!