Bagaimanakah Saya Boleh Memaparkan Bahagian Khusus Imej Menggunakan HTML dan CSS?

Memaparkan Bahagian Imej dalam HTML/CSS

Keupayaan untuk memaparkan bahagian tertentu imej adalah keperluan biasa dalam web pembangunan. Sama ada untuk mencipta lakaran kecil atau menyerlahkan bahagian tertentu, terdapat beberapa teknik yang tersedia:

Penyelesaian HTML

elemen menawarkan penyelesaian yang berkuasa untuk memaparkan bahagian imej yang berbeza berdasarkan kriteria tertentu. Dengan bersarang berbilang elemen dalam bekas, anda boleh menentukan URL atau gaya imej yang berbeza untuk saiz port pandangan yang berbeza, nisbah piksel peranti atau keadaan lain. Pendekatan ini memberikan fleksibiliti yang lebih besar untuk mengawal bahagian imej yang dipaparkan:

<picture>
  <source media="(min-width: 1000px)" srcset="image-full.jpg">
  <source media="(min-width: 500px)" srcset="image-medium.jpg 50w, image-full.jpg 100w">
  <img src="image-small.jpg" alt="default image">
</picture>

Penyelesaian CSS Menggunakan clip()

Properti clip() seperti yang dinyatakan dalam soalan , membolehkan anda menentukan kawasan segi empat tepat untuk dipaparkan dalam elemen. Walau bagaimanapun, ia memerlukan elemen untuk diletakkan secara mutlak:

.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
}

css:url() Rujukan

Malangnya, sifat clip() tidak boleh digunakan secara langsung dengan rujukan css:url(). Walau bagaimanapun, anda boleh mencipta elemen imej baharu yang mempunyai bahagian terpotong yang dikehendaki dan kemudian menggunakan imej tersebut sebagai imej latar belakang elemen asal:

#element {
  background-image: url(clip.png);
  background-position: 50% 0%;
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaparkan Bahagian Khusus Imej Menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!