爲標題使用背景圖像

Question

我有一個圖像，我必須用於我的標題，我不能使用固定圖像作爲標題寬度根據標題文本而變化，因此我做了3片圖像，重複，中間片將重複與文本和結束切片圖像，應該關閉標題，我已經包括了圖像和我正在使用的CSS，結束切片不起作用，任何人都可以告訴我我做錯了什麼：

<div class="product-item"> 
<div class="product-title"> 

<span><h3>@Model.Name</h3></span> 

</div> 

</div> 

CSS：

.product-grid .product-item .product-title 
{ 
background-image: url('images/first-slice.png'); 
background-repeat: no-repeat; 
background-position: 0% 0%; 
height:37px; 
} 
.product-grid .product-item .product-title span 
{ 
background-image: url('images/last-slice.png'); 
background-repeat: no-repeat; 
background-position: 100% 50%; 
height:37px; 
} 

.product-grid .product-item .product-title h3 
{ 
background-position: 50%; 
background-image: url('images/middle-slice.png'); 
background-repeat: repeat-x; 
height:37px; 
margin-left:5px; 
} 

現場測試網站：Website

首先圖片： 中圖片： 結束切片：

Answer 1

你應該改變：

<span><h3>@Model.Name</h3></span> 

到：

<div><h3>@Model.Name</h3></div> 

的問題是，span是內聯元素，在其上設置height將不起作用。

<span><h3>@Model.Name</h3></span>也是無效的HTML。

---

正如@ptriek所指出的那樣，您還需要交換元素之間背景的順序。

這是你需要的CSS（假設你改變了span爲div）：

.product-grid .product-item .product-title 
{ 
    background-image: url('images/middle-slice.png'); 
    background-repeat: repeat-x; 
} 
.product-grid .product-item .product-title div 
{ 
    background-image: url('images/first-slice.png'); 
    background-repeat: no-repeat; 
    background-position: left; 
} 
.product-grid .product-item .product-title h3 
{ 
    background-image: url('images/last-slice.png'); 
    background-repeat: no-repeat; 
    background-position: right; 
    height: 37px; 
    margin-left: 5px; 
} 

Answer 2

的H3（含重複中圖）坐落在跨度的頂部，包含你的右圖像。

在h3上設置正確的圖像，並在跨度上設置重複的圖像 - 應該修復它。

而且跨度更好地改變一個div，因爲跨度不能包含塊元素，如H3（語義上不正確）

Answer 3

添加更多的div，它會更容易：

<div id=wrapper> 
<div id="bg_header">&nbsp;</div> 
    <div id="content"> 
    &nbsp; 
    </div> 
<div id="bg_footer">&nbsp;</div> 
</div> 

我我已經在很多項目中完成了這項工作，並且這適用於所有主要的瀏

Answer 4

主要問題是h3元素與包含span的寬度相同。此span也被設置爲display:block，以使background-position正常工作。

但是，正如評論中所說，爲了讓HTML也有效，這個跨度必須改爲div。

然後，我剛剛在h3元素中添加了margin-right:5px。

最後，爲了使文本垂直居中，請使用line-height而不是height。

.product-grid.product-item.product-title 
{ 
    background-image: url('images/last-slice.png'); 
    background-repeat: no-repeat; 
    background-position: 100%; 
    line-height:37px; 
} 

.product-grid.product-item.product-title h3 
{ 
    background-position: 50%; 
    background-image: url('images/middle-slice.png'); 
    background-repeat: repeat-x; 
    line-height:height:37px; 
    margin-left:5px; 
    margin-right:5px; 
} 

.product-grid.product-item.product-title div { 
    background-image: url('images/first-slice.png'); 
    background-repeat: no-repeat; 
    background-position: 0%; 
    line-height:37px; 
}