如何在 CSS 中旋轉背景圖片而不旋轉其內容？

在容器內旋轉背景圖像而不影響內容

在設計網站組件樣式時，一個常見的元素是滾動條。為了獲得更具視覺吸引力的設計，您可能需要自訂捲軸元素。但是，旋轉滾動條上的背景圖像可能並不總是符合預期。

在 Chrome 中，旋轉背景影像也可能會旋轉其中的內容。如果您希望旋轉圖像而不旋轉其內容，這裡有一個潛在的解決方案：

http://www.sitepoint.com/css3-transform-b​​ackground-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中文網其他相關文章！