3

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

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

2 回答 2

3

要以您概述的方式解决它，您应该将徽标创建为自己的元素，并使用 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 文本！

于 2013-05-05T20:49:47.927 回答
1

我认为您要让徽标图像显示在标题顶部的唯一方法是将其移到另一个子元素中。不过，您不需要额外的标记 - 您可以只使用: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-05T20:51:05.527 回答