CSS：在子背景图像上显示父背景图像[重复]答案

【问题标题】：CSS: Displaying parent background image over the child background image [duplicate]CSS：在子背景图像上显示父背景图像[重复]
【发布时间】：2013-05-06 04:51:05
【问题描述】：

在我的示例http://jsfiddle.net/cXbMb/ 中，我需要完全显示徽标图像，即标题图像必须部分透支。还有下一个要求：标题图片必须在标题下方 5px 处开始。

<!DOCTYPE html>
<html><head></head>
<body>
    <header>
        <h1>Headline</h1>
        <div></div>
    </header>
</body>
</html>

body { padding: 0; margin: 0 auto; width: 400px; }
header {
    background-image: url('http://placehold.it/100x50/ffff00&text=LOGO');
    background-position: left top;
    background-repeat: no-repeat;
}
header h1 { text-align: right; margin: 0 0 5px; padding: 0; font-size: 1em; }
header div {
    background-image: url('http://placehold.it/400x100/0000ff&text=HEADER');
    background-position: left top;
    background-repeat: no-repeat;
    height:200px;
}

【问题讨论】：

听起来你需要z-index。

标签： css

【解决方案1】：

要以您概述的方式解决它，您应该将徽标创建为自己的元素，并使用 z-index。像这样：http://jsfiddle.net/fzUtb/1/

<!DOCTYPE html>
<body>
    <header>
        <div class="logo"></div>
        <h1>Headline</h1>
        <div></div>
    </header>
</body>

新样式如下：

header{position:relative;}
.logo { background-image: url('http://placehold.it/100x50/ffff00&text=LOGO'); background-position: left top; background-repeat: no-repeat;position:absolute;z-index:2;width:100px;height:50px; }

这可能会让人毛骨悚然，但我建议徽标不要是 CSS 图像！ CSS 是关于样式的，但这个标志是真实的内容，所以我相信语义上的 HTML 元素更有意义。这样它会打印（不打印 CSS 背景），并且它可以为屏幕阅读器和 Google 提供 ALT 文本！

【讨论】：

【解决方案2】：

我认为您要让徽标图像显示在标题顶部的唯一方法是将其移到另一个子元素中。不过，您不需要额外的标记 - 您可以使用 :after 伪元素。

header {
    position:relative;
}
header:after {
    content:'';
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background-image: url('http://placehold.it/100x50/ffff00&text=LOGO');
    background-position: left top;
    background-repeat: no-repeat; 
}

【讨论】：