Bagaimanakah Saya Boleh Memaparkan Hanya Sebahagian Imej Menggunakan HTML dan CSS?

Memaparkan Bahagian Imej dalam HTML/CSS

Apabila memaparkan imej, kadangkala anda mungkin mahu mempamerkan bahagian tertentu sahaja ia. HTML dan CSS menawarkan beberapa teknik untuk mencapainya.

Menggunakan Hartanah 'Klip' CSS

Satu pendekatan ialah menggunakan sifat 'klip' ​​dalam CSS. Walau bagaimanapun, sifat ini memerlukan elemen diletakkan secara mutlak, yang boleh menimbulkan pengehadan dalam senario tertentu.

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

Menggunakan 'css:url()' Rujukan

Jika anda menggunakan rujukan 'css:url()', keratan imej tidak boleh dilaksanakan secara langsung dalam CSS. Dalam kes sedemikian, anda boleh mempertimbangkan untuk menggunakan teknik 'menghiris imej', yang melibatkan menghiris imej kepada bahagian yang lebih kecil dan memaparkan bahagian yang diingini sahaja.

<div class="container">
  <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Bagaimanakah Saya Boleh Memaparkan Hanya Sebahagian Imej Menggunakan HTML dan CSS?" ><p>Teknik ini membolehkan anda memaparkan hanya pusat 50x50px bahagian imej 250x250px yang dinyatakan di atas.</p>
<p><strong>Alternatif Pendekatan</strong></p>
<p>Jika anda tidak boleh menggunakan kedudukan mutlak atau teknik 'menghiris imej', anda boleh meneroka kaedah lain seperti:</p>
<ul>
<li>
<strong>Memotong imej:</strong> Pangkas imej secara luaran menggunakan perisian penyuntingan imej dan gunakan bahagian yang dipangkas sahaja.</li>
<li>
<strong>Menggunakan JavaScript:</strong> Gunakan JavaScript untuk melaraskan saiz paparan imej secara dinamik, memangkasnya dengan cepat.</li>
<li>
<strong>Menggunakan pemapar imej:</strong> Gunakan pemapar imej yang menyediakan fungsi pemangkasan, seperti sebagai alat 'Pemapar Imej' dalam penyemak imbas moden.</li>
</ul>
</div>

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