显示具有基础背景图像的流体宽度标题区域

Question

我正在寻找一个页面，我正在寻找一个带底层图像的流畅宽度标题区域。标题可以是可变长度的，但随着标题的长短，整个区域需要适当扩展或收缩。

以下是一个例子：

我有一个潜在的怀疑，答案将与z-index属性有关，但到目前为止还没有真正解决过，所以我可能错了。我也希望图像在标题很短的情况下不重叠，因此最小宽度也可能是必要的。

有人能提供一个例子吗？

Answer 1

这个小提琴有一个你想要的例子：http://jsfiddle.net/4fJCL/

<span class="left-image"></span>
<span class="text"></span>
<span class="right-image"></span>

左右图像应用于存储图像。之后，您只需要保证通过在负边距下拉动图像来渲染文本。 position: relative上的.text是为了保证它显示在其他人身上。

.left-image, .right-image { 
    display:inline-block;
    background: purple;
    width: 30px;
    height: 20px;
}
.text { 
    position: relative;
}

.left-image {
    margin-right: -20px;
}

.right-image {
    margin-left: -20px;
}