使用标题的背景图像

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

主要问题是h3元素的宽度与包含span的宽度相同。此span也设置为display:block，以便background-position正常运行。

但是，正如评论中所述，为了使HTML也有效，必须将此范围更改为div。

然后，我刚刚向margin-right:5px元素添加了h3。

最后，为了让文字垂直居中，请使用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;
}

Answer 2

h3（包含重复的中间图像）位于跨度的顶部，包含右图像。

在h3上设置右图像，在跨度上设置重复图像 - 应该修复它。

最好将跨度更改为div，因为span不能包含像h3这样的块元素（语义上不正确）

Answer 3

你应该改变：

<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 4

添加更多div，会更容易：

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

我在很多项目中都这样做了，这适用于所有主流浏览器。