html - 重复背景图像被切断

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(...)

Answer 2

解决此问题的一种方法是将行高设置为与背景图像高度相同，即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 3

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

Answer 4

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

正如汤姆 C 所说，您可以更改行高以匹配背景的高度。

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

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

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要如何重复图像的值，例如 onx-axis或y-axis。如果您要定义这些值，我希望图像会根据您的要求完美地重复。

看演示： -http: //tinkerbin.com/1kg6u3PW