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

在不影響內容的情況下旋轉背景圖像

嘗試使用CSS 旋轉容器內的背景圖像時，通常會遇到以下問題圖像內容也在旋轉。這似乎是一個令人沮喪的限制，因為它可能會破壞所需的視覺效果。這個問題的一個有效解決方案在於 Sitepoint 的一次富有洞察力的討論中展示的一種技術。

此方法涉及建立一個偽元素（例如：before）並將其絕對定位在容器內。透過操縱偽元素的寬度、高度和偏移量，它可以充當背景圖像的單獨畫布。至關重要的是，transform 屬性應用於偽元素，旋轉背景影像，同時保持原始內容不變。

這是一個簡化的範例：

在此範例中，# myelement 的 :before 偽元素絕對定位並使用百分比調整大小，以確保它覆蓋整個容器區域。背景影像是使用background屬性設定的，並且應用於偽元素的transform:rotate(30deg)將影像旋轉30度。

透過使用此技術，您可以獨立地旋轉背景圖像內容，使您能夠在不破壞頁面佈局或功能的情況下實現所需的視覺效果。

以上是如何在 CSS 中旋轉背景圖片而不旋轉內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！