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

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

有没有人对更好的方法有任何想法或建议？告诉背景图像的一些方法只能在10px之后重复？

Answer 1

如果将其制作成边框图像，则可能会有更好的结果，并使用

border-image-repeat: round;

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

CSS：后台重复增量

1 个答案: