Question

我正在处理的网站标题如下：

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

他们需要......

a）以页面为中心

b）灵活的宽度，以适应所包含的文本，并在两侧填充几个填充。

c）在IE9 +上工作，当然还有所有其他现代浏览器

d）在任何背景上工作（因此使用的图像可以包含白色位以帮助覆盖）

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

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

现在我在多张BG图像上，我以前没用过。与上述问题相同，它们重叠。解决方案似乎是＆＃34; clip＆＃34;中间的一个到内容框，但是然后限制我可以使用的填充严格53px，＆＃34;宽度＆＃34;横幅的每个末端位置，使它们看起来太局促？

另外，这些中心的最佳方法是什么？他们是h1标签。我需要使用定位/翻译/内联块吗？或者我可以以某种方式将它们保持为100％宽度的块元素（这将更容易/更好）并且只是集中背景？

这是我试图让它们变得流畅之前所拥有的：

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%)
 }

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

1 个答案: