Bagaimanakah Saya Boleh Memutar Imej Latar Belakang dalam CSS Tanpa Memusingkan Kandungan?

Memutar Imej Latar Belakang Tanpa Menjejaskan Kandungan

Apabila cuba memusingkan imej latar belakang dalam bekas menggunakan CSS, adalah perkara biasa untuk menghadapi isu kandungan imej juga berputar. Ini boleh kelihatan seperti had yang mengecewakan, kerana ia boleh mengganggu kesan visual yang diingini. Satu penyelesaian yang berkesan untuk masalah ini terletak pada teknik yang dipamerkan dalam perbincangan yang bernas di Sitepoint.

Pendekatannya melibatkan mencipta unsur pseudo (cth., :sebelum) dan meletakkannya secara mutlak dalam bekas. Dengan memanipulasi lebar, ketinggian dan offset bagi unsur pseudo, ia boleh berfungsi sebagai kanvas yang berasingan untuk imej latar belakang. Yang penting, sifat transformasi digunakan pada elemen pseudo, memutar imej latar belakang sambil membiarkan kandungan asal tetap utuh.

Berikut ialah contoh mudah:

#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);
}

Dalam contoh ini, # myelement's :sebelum pseudo-element diletakkan secara mutlak dan bersaiz menggunakan peratusan untuk memastikan ia meliputi keseluruhan kawasan kontena. Imej latar belakang ditetapkan menggunakan sifat latar belakang, dan transformasi: putar(30deg) digunakan pada elemen pseudo memutar imej sebanyak 30 darjah.

Dengan menggunakan teknik ini, anda boleh memutar imej latar belakang secara bebas daripada kandungan, membolehkan anda mencapai kesan visual yang diingini tanpa mengganggu reka letak atau fungsi halaman anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memutar Imej Latar Belakang dalam CSS Tanpa Memusingkan Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!