Rumah >hujung hadapan web >tutorial css >Bagaimana Mengekalkan Kedudukan Imej Latar Belakang Tetap Semasa Memusingkan Bekas dalam CSS?

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

Barbara Streisand
Barbara Streisandasal
2024-12-03 08:35:10677semak imbas

How to Keep Background Image Position Fixed When Rotating a Container in 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn