Bagaimanakah Saya Boleh Memutar Imej Latar Belakang dalam Bekas Tanpa Menjejaskan Kandungannya?

Memutar Imej Latar Belakang dalam Bekas

Dalam soalan ini, pengguna ingin memutarkan imej latar belakang yang diletakkan di bahagian bawah bar skrol Chrome, tetapi hanya imej , bukan kandungannya.

CSS yang disediakan:

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(images/arrowup.png);
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ECEEEF;
    border-color: #999;
}

Untuk mencapai putaran yang diingini tanpa mempengaruhi kandungan, pendekatan dua peringkat dicadangkan. Mula-mula, cipta elemen pseudo dengan putaran yang diingini menggunakan transformasi CSS:

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

Ini mencipta elemen pseudo telus yang merentangi keseluruhan bekas dan diputar mengikut sudut yang dikehendaki. Kandungan bekas kemudiannya diletakkan di atas elemen pseudo yang diputar ini.

Seperti yang dicadangkan dalam sumber yang dirujuk, teknik ini membenarkan penggiliran imej latar belakang tanpa memutarbelitkan kandungannya.

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