css - 显示带有底层背景图像的流体宽度标题区域

Question

我正在处理一个页面，我希望在该页面上创建一个带有底层图像的宽度可变的标题区域。标题可以是可变长度的，但整个区域需要随着标题的长短适当扩大或缩小。

这是一个例子:

我暗暗怀疑答案与 z-index 属性有关，但到目前为止还没有真正使用过它，所以我可能是错的。我还希望在标题很短的情况下图像不会重叠，因此 min-width 也可能是必要的。

谁能举个例子？

Answer 1

这个 fiddle 有一个你想要的粗略例子:http://jsfiddle.net/4fJCL/

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

应该使用左右图像来存储您的图像。之后，您只需要通过使用负边距将图像拉到下方来保证文本呈现在顶部。 .text 上的 position: relative 是为了保证它显示在其他内容之上。

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