Cara Putar Imej Latar Belakang Dalam CSS3 Menggunakan Transforms | Sitepoint 'data-gatsby-head =' true '/> Joseph Gordon-Levitt Lepaskan： 2025-02-08 08:33:09 asal 364 orang telah melayarinya

Artikel ini menerangkan bagaimana untuk bekerja di sekitar batasan transformasi CSS yang tidak memohon kepada imej latar belakang. Ia memperincikan teknik untuk memutar atau memanipulasi imej latar belakang secara bebas dari elemen kontena mereka.

Konsep Utama:

1. Masalah: sifat (seperti transform, rotate, scale) tidak langsung mempengaruhi imej latar belakang. Artikel ini menyediakan penyelesaian untuk mengatasinya. skew
2. Penyelesaian: Pseudo-elements: Teknik teras menggunakan atau ::before pseudo-elements. Dengan menggunakan imej latar belakang ke elemen pseudo, anda boleh mengubah ::after itu elemen, meninggalkan bekas utama yang tidak disentuh atau diubah secara berasingan.
3. Fungsi transformasi: Artikel mengkaji fungsi transformasi biasa: , rotate(), dan matrix(), menerangkan penggunaan dan parameter mereka. rotate3d()

berputar imej latar belakang:

untuk memutar imej latar belakang tanpa menjejaskan kandungan bekas, gunakan pendekatan ini:

#myelement {
  position: relative;
  overflow: hidden;
}

#myelement::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url('background.png') no-repeat center;
  background-size: cover;
  transform: rotate(45deg);
}

Memperbaiki latar belakang semasa putaran kontena:

Jika bekas itu sendiri diputar, anda perlu mengatasi putaran pada pseudo-elemen:

#myelement {
  position: relative;
  overflow: hidden;
  transform: rotate(30deg);
}

#myelement::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url(background.png) 0 0 repeat;
  transform: rotate(-30deg);
}

Keserasian penyemak imbas: Teknik -teknik ini serasi dengan pelayar moden dan juga versi Internet Explorer yang lebih tua (dengan awalan vendor). Carta keserasian dimasukkan ke dalam artikel asal.

Aplikasi Praktikal: Artikel mencadangkan penggunaan kes seperti bahagian wira dinamik, paparan produk e-dagang, dan laman web portfolio interaktif.

Amalan terbaik dan penyelesaian masalah: Artikel ini disimpulkan dengan amalan terbaik untuk pengoptimuman prestasi, CSS yang boleh dikekalkan, pengoptimuman mudah alih, dan pertimbangan aksesibiliti. Petua penyelesaian masalah biasa menangani isu-isu seperti imej cut-off, animasi jerky, dan unsur-unsur yang hilang. Seksyen Soalan Lazim menangani soalan yang sering ditanya mengenai imej latar belakang berputar dalam CSS.

Respons yang ditulis semula ini mengekalkan makna asal sementara ayat -ayat dan bahagian penstrukturan semula untuk aliran dan kebolehbacaan yang lebih baik. URL imej dipelihara.

Atas ialah kandungan terperinci Cara Putar Imej Latar Belakang Dalam CSS3 Menggunakan Transforms | Sitepoint 'data-gatsby-head =' true '/>