CSS3背景图像滑块：动画和背景大小

问题描述：

我正在通过仅使用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

答

这是不可能的，我想这样做。做到这一点的最佳方法是为每个图像创建容器，然后将CSS过渡分配给它们，如http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.html

CSS3背景图像滑块：动画和背景大小

相关推荐