CSS中旋轉容器時如何保持背景圖片位置固定？

在容器旋轉期間保留影像位置

在 Web 開發中，旋轉容器背景影像而不影響其內容可能是一項具有挑戰性的任務。當容器套用變換旋轉時，影像內容通常也會隨之變化。為了解決這個問題，讓我們探索一種將圖像內容保持在原始位置的解決方案。

使用CSS 變換實現背景圖像旋轉

考慮以下CSS，它嘗試旋轉某個物體的背景圖像垂直滾動條遞減按鈕：

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

不幸的是，這種方法會旋轉影像及其內容。為了防止這種情況，請參閱下面連結的文章以獲得全面的解決方案：

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

解決方案：帶有反轉的偽元素旋轉

提供的解決方案使用偽元素建立虛擬影像圖層並對其應用反向旋轉：

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

此方法本質上偏移了容器的旋轉，留下影像內容到位。請注意，您可能需要調整旋轉角度和其他值才能達到您的特定設計所需的結果。

以上是CSS中旋轉容器時如何保持背景圖片位置固定？的詳細內容。更多資訊請關注PHP中文網其他相關文章！