防止從剪輯中重複背景

Question

我有以下示例：http://jsfiddle.net/umxvq52j/重複背景的星星。

CSS：

.stars 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 320px; 
    background: url('http://i59.tinypic.com/2i95zzk.png') left center repeat-x; 
} 

我想要做的就是讓這個明星完全填補空間，你沒有得到星星的邊緣裁剪！所以如果我在一個較小的屏幕上，它會顯示2-3個星星，然後顯示6-7等等，並且從不顯示半個星星。

這可能嗎？

Answer 1

我不知道如果這是你在找什麼，但看看在round屬性背景

background: url('http://i59.tinypic.com/2i95zzk.png') round 0 0; 

幸得CSS3 background spacing

Answer 2

爲了獲得最佳的瀏覽器支持，如果你不介意JavaScript和多一點的打字：

Fiddle

HTML：

<div class="stars_con"> 
<div class="stars"></div> 
</div> 

CSS：

.stars_con 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 320px; 

} 
.stars{ 
    background: url('http://i59.tinypic.com/2i95zzk.png') left center repeat-x; 
    width:100%;height: 320px; 
} 

JS：

$(window).on("resize load", function() { 
    var screenWidth = $(window).width(); 
    var starWidth = 320; 
    var width = screenWidth - (screenWidth % starWidth); 
    $('.stars').css({ 
     'width': width 
    }); 
}); 

Answer 3

你可以做一些漂亮哈克，如果你有你的圖片設置測量： jsfiddle here

.stars 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 320px; 
    background: url('http://placehold.it/200x200') left center repeat-x; 
} 

@media screen and (max-width: 600px) { 
    .stars 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 320px; 
    background: url('http://placehold.it/200x200'),url('http://placehold.it/200x200'); 
    background-position: left, right; 
    background-repeat: no-repeat, no-repeat; 
} 
}