html - Foundation 6 - 使用CSS正确排列Header图片和Nav

Question

我正在使用 Foundation 6 尝试创建与导航栏的一部分重叠的标题图像。它使用 .row作为响应式 div 类。

HTML

<header class="row text-center">
  <a href="//google.com">
    <img src="path/to/horizontal banner image">
  </a>
 </header>

<nav>
  <div class="row text-center">
    <a href="//yahoo.com">Text here</a>
  </div>
</nav>

CSS

header{
  background-color: lightgreen;
}

nav{
  margin-top: -5%;
  font-size: 150%;
  background-color: lightblue;
}

http://jsfiddle.net/hvmt2j1j/

如上面的 fiddle 所示，我有一个图像和一个包含链接的导航栏。图片本身也是一个链接。

但是我发现:

• 当屏幕尺寸较大时，文字向上而不是 不再与图像正确对齐。
• 在某些浏览器中，图像链接与导航栏链接重叠。我想将图片的可点击区域限制为仅绿色区域。

我对此很陌生，因此我相信可能有更好的方法来构建 <div>标签或 CSS 来实现这一点。非常感谢。

Answer 1

我的主张:

body {
  margin: 0;
}
header {
  background-color: #6C6;
  background-image: url("http://sweetclipart.com/multisite/sweetclipart/files/imagecache/middle/banner_white.png"), url("https://i.imgur.com/TILTsNC.png");
  background-repeat: no-repeat, repeat-x;
  background-position: top center, bottom;
  height: 189px;
  max-width: 100%;
  width: 550px;
}
.green {
  display: block;
  height: 80%;
}
.blue {
  display: block;
  font-size: 2em;
  height: 20%;
  text-align: center;
  text-decoration: none;
}

<header>
  <a class="green" href="https://www.google.com/"></a>
  <a class="blue" href="https://www.yahoo.com/">Text here</a>
</header>

您只用两个 <a> 定义一个 header 您视为 block (在 HTML5 中)内容的元素，这意味着它们的行为就像 div s，但当然可以点击，因为它们毕竟仍然是链接。为此，您必须给他们 display: block风格。然后你需要为 <header> 堆叠两个背景.第一张是您的图片，第二张是浅蓝色，宽度为 1 像素，高度为所需蓝色区域高度(在本例中为 189 像素的 20%)。关于 的更多信息 Using CSS multiple backgrounds (MDN)。