如何在图片上放置网站名称和标题

我想在网页标题中的图片上放置网站标题和标语。我创建了一个测试小提琴：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>

来源

2014-02-23 Nilambar

将图像设置为用于标题的元素的背景是什么？ – royhowie

如果您使用的是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; 
}

标题的z-index是9，它是小于nav的，这意味着它将被放置在图像的顶部时呈现页面。

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

来源

2014-02-23 04:12:14 royhowie

我需要标题图像下的'header'和网站标题下的'nav'。你能检查小提琴吗？ – Nilambar

CSS：

.header-image-wrapper img { 
position: relative; 
} 
.site-info { 
position: absolute; 
}

包含div或IMG必须是相对的，你想在上面什么是绝对的。如果它落后于img使用z-index。：D

来源

2014-02-23 04:11:41 Leoxid

我尝试过类似的方法，但是当我使用绝对位置标题标记时，并没有按下它下面的内容。下面的内容也是从头文件开始的。你能检查小提琴吗？ – Nilambar

如何在图片上放置网站名称和标题

回答

相关问题