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

【问题标题】：CSS3 background-image slider: animate and background-sizeCSS3 背景图像滑块：动画和背景大小
【发布时间】：2023-03-08 03:35:01
【问题描述】：

我只使用 CSS 创建图像滑块。我几乎完成了编码，但我不知道我必须做什么才能使图像在滑动时不会不成比例地缩放。我仍然希望它们填充 div 而不是 100% 拉伸，我也不想剪切图像，因为我想（你）想办法做到这一点:)

这是我的代码的一部分：

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？我以前从未见过。
使用cover 代替fill: jsfiddle.net/qDmS8/4
你说的都是对的。它是背景大小：填充。但是现在看看它。它的行为有问题。此外，我不希望第一个图像转换为下一个图像。它应该在不变形的情况下褪色。 jsfiddle.net/qDmS8/16
对不起，我的意思是背景尺寸：封面！

标签： image google-chrome css slider

【解决方案1】：

不可能按照我想要的方式进行。最好的方法是为每个图像创建容器，然后为它们分配 CSS 过渡，如 http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.html

所示

【讨论】：