在容器內旋轉背景圖像而不影響內容
在設計網站組件樣式時，一個常見的元素是滾動條。為了獲得更具視覺吸引力的設計，您可能需要自訂捲軸元素。但是，旋轉滾動條上的背景圖像可能並不總是符合預期。
在 Chrome 中，旋轉背景影像也可能會旋轉其中的內容。如果您希望旋轉圖像而不旋轉其內容，這裡有一個潛在的解決方案：
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);
}此程式碼使用:before 選擇器建立一個偽元素。它絕對定位一個尺寸為其父元素大小兩倍的透明框，並將其置於父元素的中心。然後將背景圖像套用到這個偽元素，確保它獨立於實際內容旋轉。
以上是如何在 CSS 中旋轉背景圖片而不旋轉其內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
