Question

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

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

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

以下是代码：http://jsfiddle.net/WkEKD/7/

由于

Answer 1

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

确保您的DIV高度是背景图像高度的倍数
使用background-size属性（仅限CSS3）缩放背景图像以填充DIV（如果适用）
使用一点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(...)

Answer 2

如果您的div的内容仅为文本，也许您可以将css中的line-height参数调整为平铺背景图像高度的某个部分？

Answer 3

您的问题有很多可能的解决方案。

正如Tom C所说，你可以改变线条高度以匹配背景的高度。

例如：http://jsfiddle.net/Nr2ca/1/

更好的解决方案是将每一行作为子元素并将背景应用于其中每一行。（如果您使用无序列表进行导航）

Answer 4

解决此问题的一个解决方案是将行高设置为与line-height: 20px;的背景图像高度相同

小提琴 - http://jsfiddle.net/WkEKD/10/

#container {
margin:0 auto;
width:20px;
background:url('http://www.jamfactory.co.za/left.png') 0 0;
    line-height: 20px;
}

Answer 5

您可以通过简单的CSS轻松获得所需的结果，如下所示： -

<强> CSS

body {background-color:#000}
#container {
margin:0 auto;
width:20px;
background:url('http://www.jamfactory.co.za/left.png') repeat-y 0 0;
}

<强> HTML

<div id="container">
  <p><br/></p>
    <p><br/></p>
    <p><br/></p>
    <p><br/></p>
    <p><br/></p>
    <p><br/></p>
    <p><br/></p>
</div>

您应该始终定义background-repeat值，以便像x-axis或y-axis那样重复图像。如果您要定义这些值，我希望图像将根据您的要求完美重复。

请参阅演示： - http://tinkerbin.com/1kg6u3PW

重复背景图像被切断

5 个答案: