javascript - 如何在div的指定高度上添加水平线？

Question

假设我有一个 500 宽和 700 高的 div。如何将水平线或图像作为特定高度的背景？我也在这里发布了http://jsfiddle.net/jt74S/

<div id="main">
these are some text and stuff, however the horizontal line/image should not be added with the text, but as a background of these.
</div>

#main {
    background: none repeat scroll 0 0 rgba(56, 56, 56, 0.75);
    border-radius: 0 3px 0 3px;
    float: left;
    font-size: 48px;
    line-height: 44px;
    padding: 20px;
}​

Answer 1

也许你可以这样做：

http://jsfiddle.net/anaida/t57XM/

在同一属性中设置背景颜色和图像。

Answer 2

也许background-positionCSS 属性会起作用。

这里的例子：

http://jsfiddle.net/rnSDw/1/

您可以将 background-position 属性更改为 left、center 等关键字或像素以进行精确定位。

Answer 3

您可以将线条制作为所需高度的一个像素宽的背景图像，然后让它在页面上重复。或者你可以使 #main position: relative 并给它一个子 div { left:0; 右：0；高度：npx；边框底部：您的规格；}。但希望@joeschmidt45 的建议是一个积极的人，你不需要做任何如此糟糕的事情^h^h^h^hpragmatic。