Bagaimana untuk Memutar Imej Latar Belakang dalam CSS tanpa Memutar Kandungannya?

Memutar Imej Latar Belakang dalam Bekas tanpa Menjejaskan Kandungan

Apabila ia datang untuk menggayakan komponen tapak web, satu elemen biasa ialah bar skrol. Untuk reka bentuk yang lebih menarik secara visual, anda mungkin mahu menyesuaikan elemen bar skrol. Walau bagaimanapun, memutar imej latar belakang pada bar skrol mungkin tidak sentiasa berkelakuan seperti yang diharapkan.

Dalam Chrome, memutar imej latar belakang juga boleh memutarkan kandungan di dalamnya. Jika anda ingin memutarkan imej tanpa memutarkan kandungannya, berikut ialah penyelesaian yang berpotensi:

Penyelesaian yang berkesan untuk isu ini dibentangkan di http://www.sitepoint.com/css3-transform-background-image/ :

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

Kod ini mencipta elemen pseudo menggunakan pemilih :before. Ia benar-benar meletakkan kotak lutsinar dengan dimensi dua kali ganda saiz elemen induknya dan memusatkannya dalam induk. Imej latar belakang kemudiannya digunakan pada elemen pseudo ini, memastikan ia berputar secara bebas daripada kandungan sebenar.

Atas ialah kandungan terperinci Bagaimana untuk Memutar Imej Latar Belakang dalam CSS tanpa Memutar Kandungannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!