如何設置動畫背景圖像原始圖像中的CSS

CSS代碼：如何設置動畫背景圖像原始圖像中的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/

現在動畫工作順利，但圖像大小不會顯示爲原始。現在設置我的原始圖像爲動畫？..爲此，當我調整背景位置或寬度和高度，動畫不能正常工作，..

有人可以幫助我們，謝謝。

來源

2014-09-01 sasi

我不明白這個問題......圖片太小了嗎？它應該有多高？ – Brian 2014-09-01 11:24:30

@BrianBennett：我想調整圖像的高度..並刪除黑色空間。 – sasi 2014-09-01 11:25:48

黑色空間是從圖像，你可以刪除它們通過Photoshop – Jack 2014-09-01 11:32:23

首先，你的圖像看起來並不大，因爲原來的文件只有100像素高。如果你想在不丟失質量的情況下使它更高，那麼你的腳本需要更大的源圖像。

以下是針對下述方法的工作fiddle。

CSS Tricks有一個很好的教程，獲得良好的全屏（或全格）圖像，您可以在這裏使用該方法。

首先，設置你的#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 */ 
}

但是，就像我說的，直到你有更高分辨率的圖像，這看起來不會太好。

來源

2014-09-01 11:38:37 Brian

nope，@Brian Bennett。我的原始圖像大小：175px。 – sasi 2014-09-01 11:41:31

當我看着你的源圖像時，[這就是我所看到的]（http://www.screencast.com/t/1VgZwWzywnK）。你需要用這些信息編輯你的問題（175px高），所以答案更有幫助。 – Brian 2014-09-01 11:44:19

這是原始圖像：http://imgur.com/P9YlCKh。請幫我解決這個問題。 – sasi 2014-09-01 12:25:18

是你想要的嗎？

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

如果是u必須添加其他家長來處理滑塊

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

來源

2014-09-01 11:35:31 Jack

是的，有了這個相同的動畫，需要增加圖像的高度，從我的原始圖像尺寸是175px， – sasi 2014-09-01 11:38:40

如何設置動畫背景圖像原始圖像中的CSS

回答

相關問題