html - 使用 CSS 覆盖父元素的背景图片

Question

在我的应用程序中，我有一个带有标题和水平线的节标题。水平线是父容器的背景图像(包含线，图像的其余部分是透明的)。标题由子元素定义。

<div class="header">
    <span>Identifier</span>
</div>

我试图通过 CSS 样式实现的是子元素显示为与父元素相同的背景颜色，但父容器的背景图像不应显示在标题下方。

.header {
    background-image: url("bg_image.png");
    background-color: #fff;
    position: relative;
height: 25px;
}
.header > span {
    position: absolute;
    background-color: #fff;
    padding: 0px 10px;
}

如果我明确设置子元素的背景颜色，这将非常有效。但是背景颜色可以由用户配置，所以我不想显式设置它。

所以我的问题是，仅使用 CSS 样式是否可能？

This fiddle显示问题(我使用渐变来模拟背景图像)。

编辑:一个重要的要求是解决方案必须跨浏览器(包括 IE8)工作。

Answer 1

如果您不介意居中标题，请尝试我在我的一个元素中使用的 css:

h1 {
  position: relative;
  white-space: nowrap;
  text-align: center;
  padding: .2em 0;
}
h1:before,
h1:after {
  content: "";
  position: relative;
  display: inline-block;
  width: 50%;
  height: 2px;

  vertical-align: middle;
  background: #000;
}
h1:before {    
  left: -.5em;
  margin: 0 0 0 -50%;
}
h1:after {    
  left: .5em;
  margin: 0 -50% 0 0;
}

您可以在此处查看结果:http://codepen.io/DerZyklop/pen/AouDn

它是纯 CSS。它通过使用 css 伪元素 :before 和 :after 添加两行。

通过一些修改，它也应该像您的示例中那样与左对齐标题一起工作。

这里要注意的另一个重要事项是 white-space: nowrap;。所以这只适用于一行，而不适用于多行。