Question

css代码：

body {
        margin: 0;
        padding: 0;
    }
    #slideshow {
        position: relative;
        overflow: hidden;
        height: 100px;
    }
    #animate-area { 
        height: 100%;
        width: 2538px;
        position: absolute;
        left: 0;
        top: 0;
        background-image: url('http://s30.postimg.org/qnju89rkx/banner.png');

        -webkit-animation: animatedBackground 40s linear infinite;
    }
    /* Put your css in here */
    @keyframes animatedBackground {
        from { left: 0; }
        to { left: -1269px; }
    }
    @-webkit-keyframes animatedBackground {
        from { left: 0; }
        to { left: -1269px; }
    }
    @-moz-keyframes animatedBackground {
        from { left: 0; }
        to { left: -1269px; }
    }

Jsfiddle：http://jsfiddle.net/cz04c4nx/2/

现在动画工作正常，但图像尺寸不显示为原始动画。现在设置我的原始图像为动画？..为此，当我调整背景位置或宽度和高度时，动画无法正常工作，..

任何人都可以帮助我，谢谢。

Answer 1

是你想要的吗？

http://jsfiddle.net/cz04c4nx/7/

如果是这样你必须添加另一个父来处理滑块

 <div id="slideshow">
     <div id="fixme">
        <div id='animate-area'>
        </div>
     </div>    
</div>

Answer 2

首先，您的图片看起来并不大，因为原始文件只有100像素高。如果你想让它更高而不会降低质量，你需要为你的剧本提供更大的源图像。

这里有一个适用于下述方法的fiddle。

CSS Tricks有一个很好的教程可以获得好的全屏（或全div）图像，你可以在这里使用该方法。

首先，设置#animate-area

的高度

#slideshow {
        position: relative;
        overflow: hidden;
        height: 400px; /* Or whatever height you want */
    }

然后，将repeat-x添加到background代码并添加background-size属性：

#animate-area {
    background: url('http://s30.postimg.org/qnju89rkx/banner.png') repeat-x;
    background-size:cover;
    .... /* Other CSS */
}

但是，就像我说的那样，在你拥有更高分辨率的图像之前，这看起来并不那么棒。

如何在css中为动画背景图像设置原始图像

2 个答案: