在边界上的背景图象

Question

我想制作这个文本框

正如你所看到的，div有两个部分 - 底部的背景图像和边框，我已经完成了：

HTML：

<div class="person">
<p>Text Text Text</p>
</div>

CSS：

.person {
    background: url('../images/results_title.png') repeat-x bottom;
    border: 1px solid #000000;
    min-height: 32px;
}

问题是边框位于背景图像上方。底部的背景应位于边框上方（=底部的背景应该只是没有任何边框的图像）。

重要： 图像上有文字。

Answer 1

如何将边框添加到<p>？你可以在p上有一个border-right和border-left，内部填充以保持文本远离框。如果<p>的其他布局会阻碍这种情况，请将它们包装在div中。

看到这个小提琴，例如： http://jsfiddle.net/56TqY/1/

红色和青色只是为了举例说明，显然我将你的背景与文字一起使用，但我认为你明白了。

Answer 2

我总是讨厌添加更多标记，但我认为this应该是您正在寻找的内容。

我刚添加了一个包装器，以便您可以在border和background-image之间添加填充