CSS：背景重復增量

Question

我有這個小提琴

在我的網頁上，我的客戶希望其內容具有記事本的外觀，但是它們也具有全角響應設計。

我想要實現的是在容器頂部有一行循環，但是我不希望最后顯示一半循環，因為那樣看起來很糟糕。

所以在我的小提琴中，第二行很簡單：

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

但是，如果您使用此按鈕快速調整大小或在瀏覽器上單擊“最大/最小”，則無法正常工作（根據您的選擇方式而定，太多或不足）。

有人對更好的方法有任何想法或建議嗎？ 告訴背景圖片僅在10px之后重復的某種方式？

Answer 1

如果將其制成邊框圖像並使用，可能會得到更好的結果

border-image-repeat: round;

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