为标题使用背景图像

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