Bagaimanakah Saya Boleh Menggunakan Topeng SVG untuk Meluaskan Kawasan Keratan Imej dalam CSS?

Memperluaskan Kawasan Keratan Imej SVG

Dalam CSS, anda boleh menggambarkan kawasan tertentu bagi imej menggunakan laluan klip. Walau bagaimanapun, jika laluan klip tidak sejajar dengan kawasan yang dikehendaki dengan sempurna, imej mungkin kelihatan terpotong.

Untuk menangani isu ini, pertimbangkan untuk menggunakan SVG sebagai topeng dan bukannya laluan klip. Kaedah ini membolehkan anda memanipulasi saiz dan kedudukan SVG seperti imej latar belakang.

Untuk menggunakan SVG sebagai topeng:

1. Tetapkan kotak pandangan yang betul:

   .clipped-img {
     ...
     -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="..."></path></svg>') 
               center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="..."></path></svg>') 
               center/contain no-repeat;
   }

   Ini melaraskan saiz SVG dan memastikan ia sejajar dengan imej sempadan.

2. Laraskan saiz imej dan kesesuaian objek:

   .clipped-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

   Sifat ini memastikan imej memenuhi kawasan keratan dan diskalakan dengan betul.

Faedah SVG Topeng:

• Saiz semula dinamik dan kedudukan semula: Pelarasan boleh dibuat berdasarkan saiz skrin atau interaksi pengguna.
• Topeng berbilang elemen: Topeng SVG tunggal boleh digunakan untuk membentuk berbilang imej atau elemen.
• Kekalkan kualiti imej: Penskalaan tidak membawa kepada pikselasi atau herotan seperti yang berlaku dengan laluan klip.

Contoh:

Pertimbangkan HTML:

<div class="img-container">
  <img class="clipped-img" src="image.jpg">
</div>

Untuk laraskan saiz dan bentuk topeng, cuma ubah suai kotak pandangan dalam SVG topeng.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Topeng SVG untuk Meluaskan Kawasan Keratan Imej dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!