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/

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

然而我发现了：

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

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

Answer 1

我的主张：

＆＃13;

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

＆＃13;

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

＆＃13;

您定义的标题只有两个<a>元素，您将其视为块（HTML5中的 flow ）内容，这意味着它们的行为与div s类似，但是当然可以点击，因为它们毕竟仍然是链接。要做到这一点，你必须给他们display: block风格。然后你需要为<header>堆叠两个背景。第一个是你的照片，第二个是浅蓝色，宽度为1px，所需蓝色区域高度的高度（在这种情况下是189px的20％）。有关 Using CSS multiple backgrounds （MDN）的更多信息。

基础6 - 使用CSS来正确排列标题图像和导航

1 个答案: