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-pseudo-elements :before和:after添加两行。

通过一些修改，它也应该与左对齐的标题很好地配合使用。

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

Answer 2

你可以结账吗？ http://jsfiddle.net/dYr29/3/ 我更新了你的小提琴

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

CSS

    .header {
    background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747   39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
    background-color: #fff;
    position: relative;
    width: 300px;
    height: 1px;
    top: 10px;
}

.header > span {
    position: absolute;
    padding: 0px 10px;
    top: -10px;
    left: 10px;
    background:#fff;

}

Answer 3

我终于确定了如何解决问题。

.header > span {
    position: absolute;
    background-color: inherit;
    padding: 0px 10px;
}

使用background-color: inherit将解决问题。我还更新了fiddle。

使用CSS覆盖父元素的背景图像

3 个答案: