背景圖像

我想使這個文本框背景圖像

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

問題是邊框在背景圖像上方。底部的背景應該在邊界之上（=底部應該只是一個沒有任何邊界的圖像）。

重要提示：圖像上有文字。

來源

2012-01-02 Luis

之間添加填充您可以將邊框添加到您的圖片，然後你沒有使用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

邊框左右兩邊都是圖片的上方，表示問題。 – Luis 2012-01-02 18:44:46

然後只需刪除'border：1px solid＃000000;'完全刪除。 – Robert 2012-01-02 18:50:01

如何將邊框添加到<p>？你可以在p上有一個邊界的右邊和左邊的邊框，內部填充可以使文本遠離盒子。如果<p>的其他佈局會妨礙此操作，請將它們包裝在一個div中。

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

紅色和青色只是爲了examplify，顯然我用你的背景與文字，但我認爲你的想法。

來源

2012-01-02 18:53:47 kontur

我總是討厭添加更多標記，但我認爲this應該是你要找的。

我只是增加了一個包裝，讓您可以在border和background-image

來源

2012-01-02 18:54:43 Ktash

回答

相關問題