css - 具有三个背景图像的灵活宽度居中标题横幅？

Question

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

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

他们需要...

a) 以页面为中心

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

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

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

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

然后我尝试了一种滑动门方法，只有 2 张图片，但显然遇到了类似的问题。

现在我在多个 BG 图像上，这是我以前没有使用过的。和上面一样的问题，它们重叠。解决方案似乎是将中间的“剪辑”到内容框，但这将我可以使用的填充严格限制为 53px，横幅每个末端位的“宽度”，使它们看起来太局促了？

此外，将这些居中的最佳方式是什么？它们是 h1 标签。我需要使用定位/翻译/内联 block 吗？或者我可以以某种方式将它们保留为 100% 宽度的 block 元素(这会更容易/更好)并且只是将背景集中在中间吗？

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

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}

出于上述原因，我对此并不满意。我觉得我错过了一些明显/简单的技巧？!

谢谢 - 自从我上次做任何重要的事情以来，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%)
 }