重复背景图像被切断

Question

我有一个容器DIV,可以根据它的高度进行扩展.它有一个背景图像,重复制作图案.

问题是重复的背景图像在div的底部被切断.

有没有办法告诉背景图像不被切断？

这是代码:http://jsfiddle.net/WkEKD/7/

谢谢

Answer 1

如果div的高度(如果高度为自动计算)不是背景图像高度的倍数,它将被切断(overflow: visible不适用于背景图像).两种可能的解决方案是

1. 确保你的DIV高度是背景图像高度的倍数
2. 使用background-size属性(仅限CSS3)缩放背景图像以填充DIV(如果适用)
3. 使用一点JS将DIV的高度设置为背景图像高度的最接近倍数(即基本上与1相同,但是通过JS)

选项#3的代码

演示:http://jsfiddle.net/h6tUs/2/

var img = new Image();
img.onload = function() {
    adjustHeight(img.height);
};
img.src = 'http://www.jamfactory.co.za/left.png';
if(img.complete) {
    adjustHeight(img.height);
}
function adjustHeight(_imgHeight) {
    var ht = $('#container').outerHeight(false);
    ht = ht + (ht % _imgHeight);
    $('#container').height(ht);    
}

上面的代码应该放在你的内部 $(document).ready(...)