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

你可以做一些非常hacky的事情，如果你已经对你的图像设置了测量值： 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;
}
}

防止剪辑重复背景

3 个答案: