Bagaimana Mengekalkan Kedudukan Imej Latar Belakang Tetap Semasa Memusingkan Bekas dalam CSS?

Memelihara Kedudukan Imej Semasa Pusingan Bekas

Dalam pembangunan web, memutar imej latar belakang bekas tanpa menjejaskan kandungannya boleh menjadi tugas yang mencabar. Apabila menggunakan putaran transformasi pada bekas, kandungan imej selalunya mengikutinya. Untuk menangani perkara ini, mari kita terokai penyelesaian yang mengekalkan kandungan imej dalam kedudukan asalnya.

Putaran Imej Latar Belakang dengan Transformasi CSS

Pertimbangkan CSS berikut, yang cuba memutarkan imej latar belakang sesuatu butang penurunan bar skrol menegak:

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(images/arrowup.png);
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    ...
}

Malangnya, pendekatan ini memutar kedua-dua imej dan kandungannya. Untuk mengelakkan perkara ini, rujuk artikel yang dipautkan di bawah untuk penyelesaian menyeluruh:

• [http://www.sitepoint.com/css3-transform-background-image/](http://www .sitepoint.com/css3-transform-background-image/)

Penyelesaian: Pseudo-Element dengan Terbalik Putaran

Penyelesaian yang disediakan menggunakan elemen pseudo untuk mencipta lapisan imej maya dan menggunakan putaran terbalik padanya:

#myelement:before {
    content: "";
    ...
    background: url(background.png) 0 0 repeat;
    transform: rotate(-30deg);
}

Kaedah ini pada asasnya mengimbangi putaran bekas, meninggalkan kandungan imej di tempatnya. Ambil perhatian bahawa anda mungkin perlu melaraskan sudut putaran dan nilai lain untuk mencapai hasil yang diingini untuk reka bentuk khusus anda.

Atas ialah kandungan terperinci Bagaimana Mengekalkan Kedudukan Imej Latar Belakang Tetap Semasa Memusingkan Bekas dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!