且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

重复背景图像被切断

更新时间:2022-03-09 06:15:48

如果div的高度(如果height为auto)你的背景图片的高度,它会被截断( overflow:visible 不适用于背景图片)。两种可能的解决方案是:

If the height (computed if height is auto) of your div is not a multiple of the height of your background image, it will get cut off (overflow: visible does not apply to background images). Two possible solutions are:


  1. 确保DIV的高度是背景图像高度的倍数

  2. 使用 background-size 属性(仅限CSS3)缩放背景图片以填充DIV(如果适用)

  3. 使用一些JS将DIV的高度设置为背景图片高度的最接近的倍数(即基本上等于1,但通过JS)

  1. Make sure your height of your DIV is a multiple of the height of your background-image
  2. Use the background-size property (CSS3 only) to scale the background image to fill the DIV (if applicable)
  3. Use a little bit of JS to set the height of your DIV to the nearest multiple of the height of your background image (i.e. basically same as 1, but via 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);    
}

上述代码应该在 $ ).ready(...)