0
我正在通過僅使用CSS創建圖像滑塊。我幾乎完成了編碼，但我無法弄清楚我必須做什麼，以便圖像在滑動時不會縮小比例。我仍然希望他們填充div，不要被拉伸到100％，我也不想剪切圖像，因爲我想（你）想辦法做到這一點:)CSS3背景圖像滑塊：動畫和背景大小
這是一部分我的代碼：
div#transition3 {
width:480px;
height:360px;
-webkit-animation:trans2 12s;
-webkit-animation-iteration-count: infinite;
-webkit-box-sizing:border-box;
-webkit-background-origin:border-box;
background-scale:fill;
}
@-webkit-keyframes trans2 /* Safari and Chrome */
{
0% {background:url('../img/1.jpg') no-repeat top left;}
10% {background:url('../img/1.jpg') no-repeat top left;}
20% {background:url('../img/2.jpg') no-repeat top left;}
30% {background:url('../img/2.jpg') no-repeat top left;}
40% {background:url('../img/3.jpg') no-repeat top left;}
50% {background:url('../img/3.jpg') no-repeat top left;}
60% {background:url('../img/4.jpg') no-repeat top left;}
70% {background:url('../img/4.jpg') no-repeat top left;}
80% {background:url('../img/5.jpg') no-repeat top left;}
90% {background:url('../img/5.jpg') no-repeat top left;}
100% {background:url('../img/1.jpg') no-repeat top left;}
}
這裏有一個小提琴：http://jsfiddle.net/qDmS8/3/。 我希望你知道我的意思，並能夠幫助我。
在此先感謝！
不是它'background-size：cover'？而不是'background-scale：fill'？以前從未見過。 – PlantTheIdea 2013-02-26 18:13:53
使用'cover'而不是'fill'：http://jsfiddle.net/qDmS8/4/ – MarcinJuraszek 2013-02-26 18:16:49
你們都是對的。它是背景大小：填充。 但現在看看它。它的行爲錯誤。另外我不希望第一張圖像轉換成下一張。它應該褪色而不改變。 http://jsfiddle.net/qDmS8/16/ – Manticore 2013-02-27 14:14:02