CSS：在子背景图像上显示父级背景图像

在我的示例http://jsfiddle.net/cXbMb/中，我需要完整显示徽标图像，即标题图像必须部分透支。还有下一个要求：标题图像必须在标题下方5px开始。CSS：在子背景图像上显示父级背景图像

<!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; 
}

来源

2013-05-05 Petr Felzmann

听起来像你需要'z-index'。 – Spudley 2013-05-05 20:40:50

为了解决它在你勾勒你应该创建标志作为自己的元素的方式，使用的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背景不打印），它可以为屏幕阅读器和谷歌提供ALT文本！

来源

2013-05-05 20:49:47 ArleyM

我认为要让徽标图像显示在标题顶部的唯一方法是将其移出到另一个子元素。你不需要额外的标记 - 你可以只使用: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; 
}

来源

2013-05-05 20:51:05

CSS：在子背景图像上显示父级背景图像

回答

相关问题