CSS：背景重复增量

Question

我有这个fiddle

在我的网页上，我的客户希望在记事本上查看他们的内容，但他们也有全宽响应式设计。

我想要实现的是在容器顶部有一行循环，但我不希望在最后显示一半，因为那看起来很糟糕。

所以在我的小提琴中，第二行很简单：

HTML

<div id="note-top2" class="note-top"></div>

CSS

#note-top2 {
    background:url(http://i.imgur.com/8hc1eSh.png) repeat-x;
}
.note-top {
    width:100%;
    height:38px;
    text-align:center;
}

这加载很快，但我们在最后有半个循环。

所以我尝试使用 jQuery 来“破解”它：

HTML

<div id="note-top" class="note-top"></div>

<img id="loop" src="http://i.imgur.com/8hc1eSh.png" alt="" />

CSS

.note-top {
    width:100%;
    height:38px;
    text-align:center;
}
#loop {
    display:none;
}

JS

function checkNoteWidth(start) {
    var el = $('#note-top');
    var loop = $('#loop');
    var elw = el.width();
    var loopw = loop.width();
    var imgCount = Math.floor(elw/loopw);
    if (start) {
        el.html('');
        for (var i=0;i<imgCount;i++) {
            el.append(loop.clone().attr('id','').addClass('loopimg'));      
        }
    } else {
        if (imgCount > $('.loopimg').length) { //if we need more images
            for (var i=0;i<(imgCount-$('.loopimg').length);i++) {
                el.append(loop.clone().attr('id','').addClass('loopimg'));      
            }
        } else if (imgCount < $('.loopimg').length) { //if we have too many images
            for (var i=0;i<($('.loopimg').length-imgCount);i++) {
                $('.loopimg').eq(i).remove();      
            }
        }
    }
}

checkNoteWidth(true)
$(window).resize(function() {
    checkNoteWidth(false);
});

但是，如果您使用它快速调整大小或在浏览器上单击最大/最小化，则它无法正常工作（太多或不够，取决于您选择的方式）。

有人对更好的方法有任何想法或建议吗？告诉背景图像仅在 10 像素后重复的某种方式？

Answer 1

如果你把它做成一个边框图像，你可能会得到更好的结果，并使用

border-image-repeat: round;

http://css-tricks.com/understanding-border-image/