CSS transformations雖然很酷，但還沒有應(yīng)用于背景圖像。這篇文章提供了一個很好的解決方法，當(dāng)您確實想要旋轉(zhuǎn)背景圖像時，或者在容器元素旋轉(zhuǎn)時保持背景圖像不變。

使用css3轉(zhuǎn)換屬性可以縮放、傾斜和旋轉(zhuǎn)任何元素。它在所有沒有廠商前綴的現(xiàn)代瀏覽器中都得到支持。（我已經(jīng)添加了-webkit-以防您希望支持一些較舊的瀏覽器。）

#myelement {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}

很棒的東西。但是，這會旋轉(zhuǎn)整個元素-其內(nèi)容、邊框和背景圖像。如果你只想旋轉(zhuǎn)背景圖像怎么辦？或者如果希望在元素旋轉(zhuǎn)時背景保持不變

目前，還沒有W3C對背景圖像轉(zhuǎn)換的建議。這將是非常有用的，所以我懷疑最終會出現(xiàn)一個，但這對今天想要使用類似效果的開發(fā)人員沒有幫助。

幸運的是，有一個解決方案。本質(zhì)上，這是一種將背景圖像應(yīng)用于偽元素之前或之后的黑客行為，而不是父容器。然后可以獨立地轉(zhuǎn)換偽元素。

僅轉(zhuǎn)換背景

容器元素可以應(yīng)用任何樣式，但必須將其設(shè)置為position:relative，因為我們的偽元素將定位在該元素中。您還應(yīng)該設(shè)置溢出：隱藏，除非您愿意讓背景溢出容器之外。

#myelement {
position: relative;
overflow: hidden;
}

我們現(xiàn)在可以創(chuàng)建一個具有轉(zhuǎn)換背景的絕對定位的偽元素。z-index設(shè)置為-1以確保它出現(xiàn)在容器內(nèi)容的下面。

#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}

注意，您可能需要調(diào)整偽元素的寬度、高度和位置。例如，如果使用的是重復(fù)圖像，則旋轉(zhuǎn)區(qū)域必須大于其容器才能完全覆蓋背景：

在轉(zhuǎn)換元素上固定背景

修復(fù)已轉(zhuǎn)換元素的背景。父容器上的所有轉(zhuǎn)換都應(yīng)用于偽元素。因此，我們需要撤消該轉(zhuǎn)換，例如，如果容器旋轉(zhuǎn)30度，則必須將背景旋轉(zhuǎn)-30度以返回到固定位置：

#myelement {
position: relative;
overflow: hidden;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);

同樣，您需要調(diào)整大小和位置，以確保背景充分覆蓋父容器。

效果在所有主要瀏覽器中都有效，在Edge和Internet Explorer中都可以恢復(fù)到版本9。IE8不會顯示任何轉(zhuǎn)換，但仍會顯示背景。

總結(jié)

以上所述是小編給大家介紹的CSS3 transforms應(yīng)用于背景圖像的解決方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

最新評論