防止重复的背景剪辑

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背景间距

Answer 2

为了获得最好的浏览器支持，如果您不介意JavaScript和更多的输入：

小提琴

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;
}

联署材料：

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

Answer 3

你可以做一些非常讨厌的事情，如果你在你的图像上设置了测量值：小提琴手

.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;
}
}