背景图像

问题描述:

我想使这个文本框背景图像

enter image description here

正如你可以看到,有两个部分股利 - 在底部边框的背景图片,我有已经完成:

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; 
} 

问题是边框在背景图像上方。底部的背景应该在边界之上(=底部应该只是一个没有任何边界的图像)。

重要提示: 图像上有文字。

+0

之间添加填充您可以将边框添加到您的图片,然后你没有使用CSS来创建它?或者代替'border:1px solid#000000;'调出你想设置为1px的边界'border-right:1px solid#000000;','border-left:1px solid#000000;'和'border-top :1px solid#000000;' – Robert 2012-01-02 18:41:24

+0

边框左右两边都是图片的上方,表示问题。 – Luis 2012-01-02 18:44:46

+0

然后只需删除'border:1px solid#000000;'完全删除。 – Robert 2012-01-02 18:50:01

如何将边框添加到<p>?你可以在p上有一个边界的右边和左边的边框,内部填充可以使文本远离盒子。如果<p>的其他布局会妨碍此操作,请将它们包装在一个div中。

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

红色和青色只是为了examplify,显然我用你的背景与文字,但我认为你的想法。

我总是讨厌添加更多标记,但我认为this应该是你要找的。

我只是增加了一个包装,让您可以在borderbackground-image