Html ：之前：透明背景上站点标题的HR值之后

遇到了一点难题

---

下图是一个站点标题区域，有一个背景图像（位于HTML文档的主体）。然后我在整个容器中加入透明背景（基本上是一个跨浏览器的半透明背景——深棕色）。最重要的是，我使用PNG-24切片来处理较暗的边缘。我坚持的部分是利用：before和：after（或者如果可能的话）在标题的两侧创建“橙色”线条。通常情况下，这很简单，例如，将橙色线应用为一个实心图像，然后将背景色应用于

h1

，但在这种情况下，我们使用的是透明背景图像，这不起作用。我已经有一段时间用这一个碰壁了，但是如果可能的话，我也不知所措——我还没有找到一个适用于HR的HTML实体（如果可以的话）。任何帮助都将不胜感激。谢谢

如果标题是一行（因此可以禁用换行），则可以使用表格演示：

<style>
H2 {display: table; width: 100%; }
H2 > SPAN {display: table-cell; white-space: nowrap; vertical-align: middle; }
H2 > SPAN:first-child + SPAN {padding: 0 .5em; width: 1px; }

/* Non-empty content and transparent color are needed for Opera 
   that otherwise does not display element as table.*/
H2 > SPAN:first-child:before,
H2 > SPAN + SPAN + SPAN:before {border-top: 1px solid #ccc; 
    color: transparent; content: "."; display: block; 
    height: 0; width: 100%; }
</style>

<h2><span></span><span>Services</span><span></span></h2>

H2{显示：表格；宽度：100%；}
H2>SPAN{显示：表格单元格；空白：nowrap；垂直对齐：中间；}
H2>SPAN:first child+SPAN{padding:0.5em；width:1px；}
/*Opera需要非空内容和透明颜色
否则不会将元素显示为表*/
H2>跨度：第一个孩子：之前，
H2>SPAN+SPAN+SPAN:before{border top:1px solid#ccc；
颜色：透明；内容：“.”显示：块；
高度：0；宽度：100%；}
服务

你在我脑海中挥之不去！真的很感激，非常好用！：）