我有这个fiddle
在我的网页上,我的客户希望他们的内容看起来像记事本,但他们也有全宽响应式设计。
我想要实现的是在容器顶部有一排循环,但我不想在最后显示一半,因为那样看起来很糟糕。
所以在我的 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 像素后重复的某种方式?
最佳答案
如果你把它做成边框图像,你可能会有更好的结果,并使用
border-image-repeat: round;
关于jquery - CSS:背景重复增量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23679529/