Bagaimanakah Saya Boleh Mencipta Kesan Transformasi Skew CSS3 Sebelah dengan Latar Belakang Imej?

Transformasi Skewing on One Side

Mencipta kesan "CSS3 Transform Skew One Side" memberikan cabaran apabila imej digunakan sebagai latar belakang bukannya warna pepejal. Penyelesaian yang disediakan menunjukkan penggunaan kecerunan, tetapi ia mungkin tidak sesuai untuk mereka yang ingin menggunakan imej.

Penyelesaian untuk Latar Belakang Imej Serong

Untuk mencapai kesan yang diingini dengan latar belakang imej, pertimbangkan pendekatan berikut:

• Div Induk: Gunakan penjelmaan condong ke div induk yang mengandungi imej. Contohnya, jika condong 20 darjah digunakan, kod CSS mungkin:

#parallelogram {
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
}

• Div Bersarang untuk Imej: Cipta div bersarang di dalam div induk condong, dan letakkan imej dalam div ini. Div bersarang ini berfungsi untuk mencabut imej. Dalam contoh di bawah, condong sebanyak -20deg digunakan pada div bersarang untuk mengatasi kecondongan div induk:

.image {
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
}

Dengan menggunakan div bersarang dengan nilai condong yang bertentangan, anda boleh berkesan mencapai kesan senget pada satu sisi sambil mengekalkan ketelusan di kawasan senget. Teknik ini ditunjukkan dalam kod contoh di bawah:

<div class="container">
  <div></div>
</div>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Kesan Transformasi Skew CSS3 Sebelah dengan Latar Belakang Imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!