html - 侧面带有流体背景图像的标题，中间没有背景

Question

我需要一个宽度为 100% 的标题，并且在第 1 列和第 3 列中有 3 列背景图像：

此解决方案需要跨浏览器兼容。

• 第一列是背景图片，宽度为 50%（不包括标题宽度）
• 第二列是标题。这没有背景（透明）。它的宽度不应大于其内容。
• 第三列与第一列相同。

使用表格需要 2 秒：http: //jsfiddle.net/aLeyS/

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td></td>
        <td>Caption</td>
        <td></td>
    </tr>

table {
    width: 100%;
}
table td:first-child, table td:last-child {
    width: 50%;
    background-image: url(http://fc01.deviantart.net/fs16/i/2007/132/9/4/BW_Striped_Background_Texture_by_Enchantedgal_Stock.jpg);
}
table td:nth-child(2) {
    padding: 0 10px;
    font-size: 30px;
}

如果没有桌子，这似乎要棘手得多。

我尝试在父 div 内的 DIV 上使用设置百分比宽度，但它总是最终使中心列的宽度超过它需要的宽度，或者如果百分比不足，则强制标题换行。

同样，中心栏（标题）的宽度不应大于其内容，并且其背景必须是透明的（不是白色）。

Answer 1

You can fix this by setting display:table-cell on the divs. I've updated your jsFiddle.

HTML

<div class='bg'></div>
<div class='caption'>Caption</div>
<div class='bg'></div>

CSS

div {
  display: table-cell;
}
div.bg {
  width: 50%;
  background-image: url(http://fc01.deviantart.net/fs16/i/2007/132/9/4/BW_Striped_Background_Texture_by_Enchantedgal_Stock.jpg);
}
div.caption {
  padding: 0 10px;
  font-size: 30px;
  text-transform: uppercase;
}