html - 如何将站点名称和标题放在图像上

Question

我想将网站标题和标语放在页眉中的图像上。我创建了一个用于测试的 fiddle :http://jsfiddle.net/rabmalin/tp84y/ .

图片和网站品牌的高度需要支持响应式功能，所以不能没有固定的高度。此外，如果仅显示站点品牌并且容器中没有图像，它也需要工作。当我使用绝对位置时，导航栏位于图像后面。

<div id="container">
    <header role="banner" class="site-header" id="masthead">
        <div class="header-image-wrapper">
            <img width="1140" height="152" alt="" src="http://nilambar.com.np/blue-planet/wp-content/uploads/2014/02/cropped-Desert.jpg" id="bs-header-image">
            <div class="site-branding">
                <div class="site-info">
                    <h1 class="site-title">
                        <a rel="home" href="http://nilambar.com.np/blue-planet/">Blue Planet</a>
                    </h1>
                    <h2 class="site-description">Demo of Blue Planet</h2>
                </div>
            </div>
        </div>
    </header>
    <nav id="site-navigation" class="blueplanet-nav" role="navigation">
        <div class="menu-main-menu-container"><ul class="nav-menu" id="menu-top"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4" id="menu-item-4"><a href="http://nilambar.com.np/blue-planet/">Home</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24" id="menu-item-24"><a href="http://nilambar.com.np/blue-planet/pages/sample-page/">Sample Page</a></li>
        </ul></div>
    </nav>
</div>

Answer 1

如果您使用的是 position: absolute;，那么您可以查看 z-index CSS 属性。您可以在页面之外设置不同的“高度”(这是第三个轴)。这样，您将首先能够让导航栏显示在其他所有内容之上。

这是一些示例 CSS:

nav {
    //whatever else you want to have here
    position: absolute;
    z-index: 10;
}
header img {
    //whatever else you want
    position: absolute;
    z-index: 9;
}

header的z-index为9，小于nav，表示当页面打开时会放在图片之上渲染。

如果这不起作用，我会尝试将标题的背景设置为图片。