CSS背景圖像旋轉

我正在旋轉容器。其實我已經做了..但有問題：背景圖像被加載了一半（容器被加載了一半）。CSS背景圖像旋轉

的代碼是：提前

@keyframes rotate-ornament { 
    from { 
    -webkit-transform: rotate(0deg); 
    } 
    to { 
    -webkit-transform: rotate(360deg); 
    } 
    } 
    @-webkit-keyframes rotate-ornament { 
    from { 
    -webkit-transform: rotate(0deg); 
    } 
    to { 
    -webkit-transform: rotate(360deg); 
    } 
    } 
    @-moz-keyframes rotate-ornament { 
    from { 
-webkit-transform: rotate(0deg); 
} 
to { 
-webkit-transform: rotate(360deg); 
} 
} 
@-ms-keyframes rotate-ornament { 
from { 
-webkit-transform: rotate(0deg); 
} 
to { 
-webkit-transform: rotate(360deg); 
} 
} 

.ornament { 
position:absolute; 
top:0; 
left:0; 
right:0; 
bottom:0; 
width:100%; 
height:100%; 
display:block; 
z-index: -1; 
} 


.ornament { 
background:transparent url('images/ornament.png') no-repeat; 
background-size: 100%; 
z-index: -1; 
-moz-animation: rotate-ornament 100s linear infinite; 
-ms-animation: rotate-ornament 100s linear infinite; 
-o-animation: rotate-ornament 100s linear infinite; 
-webkit-animation: rotate-ornament 100s linear infinite; 
animation: rotate-ornament 100s linear infinite; 
}

謝謝！

來源

2013-10-22 ჯ ბოლ

我想你將不得不嘗試解釋更詳細的問題，因爲我已經訪問了鏈接並且無法看到問題出現在哪裏。 – dav1dsm1th

http://industrial-city.com/test/images/ornament.png –

我需要這個圖像（無切割）在背景中旋轉.. –

的問題是height:100%

我改變了格「.ornament」的那個高度（通過Chrome檢查），背景圖像（1386px）的實際高度，它工作正常。

來源

2013-10-22 18:39:02

非常酷的網站佈局的方式！ –

感謝評論:)在這種情況下（身高：1386px）它工作正常，但網站有大溢出 - Ÿ..我想如何隱藏它 –

CSS背景圖像旋轉

回答

相關問題