Flexible-width 带有三个背景图片的居中标题横幅？

Question

我正在处理的网站有这样的标题：

http://i.imgur.com/ssvj8J1.png

他们需要...

a) 在页面上居中

b) 宽度灵活，以适应包含的文本，两边填充几个 em。

c) 适用于 IE9+，当然还有所有其他现代浏览器

d) 在任何背景上工作（因此使用的图像不能包含有助于叠加的白色位）

我开始将它分成 3 位，并使用 ::before 和 ::after。这有背景重叠的问题。

然后我尝试了 sliding-doors 方法，只有 2 张图片，但显然有类似的问题。

现在我在多张BG图片上，我以前没有用过。和上面一样的问题，它们重叠。解决方案似乎是 "clip" 中间的 content-box，但是这将我可以使用的填充严格限制为 53px，横幅每个结束位的 "width"，使它们看起来太局促了？

此外，将它们居中的最佳方法是什么？它们是 h1 标签。我需要使用 positioning/translation/inline-block 吗？或者我可以以某种方式将它们保留为 100% 宽度的块元素（这将是 easier/better）并且只是集中背景？

这是我在尝试使它们变得流畅之前所拥有的：

h1{
    background:url(banner.png) 50% 0 no-repeat;
    line-height:52px;
    color:#fff;
    padding:0 0 6px}

这就是我现在所在的位置：

h1{
    background-image:url(banner-left.png), url(banner-mid.png), url(banner-right.png);
    background-position:0%, 50%, 100%;
    background-repeat:no-repeat, repeat-x, no-repeat;
    background-clip:border-box, content-box, border-box;
    line-height:52px;
    color:#fff;
    display:inline-block;
    padding:0 53px 6px}

出于上述原因，我对此并不满意。我觉得我缺少一些 obvious/easy 技巧？！

谢谢 - CSS 自从我上次做任何重要的事情以来似乎已经进步了很多！

Answer 1

您可以使用伪元素并完全避免图像。

Codepen Demo

HTML

<div><h1><span>Short Text</span></h1></div>

<div><h1><span>Much Longer Text</span></h1></div>

CSS

body {
  text-align: center;
}
div {
  margin: 25px;
}
h1 {
  position: relative;
  line-height: 1em;
  max-width:50%;
  display: inline-block;
}

h1 span {
  color:gold;
  padding: .5em;
  background: black;
  box-shadow: 
    0 0 0px 1px gold,
    0 0 0px 3px black;

}

h1::before, h1::after {
  position: absolute;
  content:"";
  top:35%;
  z-index:-1;
  border: solid black;
  border-width:25px;
}

h1::before  { /* left */
  border-left-color:transparent;
  left:0;
  transform:translateX(-75%)
}

h1::after { /* right */
  border-right-color:transparent;
  right:0;
  transform:translateX(75%)
 }

Flexible-width 带有三个背景图片的居中标题横幅？

Flexible-width centered heading banner with three background images?

css

fluid-layout

responsive-design