0

我正在学习使用 HTML 和 CSS 进行 Web 开发。我一直在关注这里的教程。到目前为止，我已经修改了教程以匹配我希望它使用的内容。我在顶部有一个导航栏和一个基本的页脚。我想看看我是否能做的是加载一个大约 800x600 的图像，它位于导航栏后面，它通过透明度显示。如果可能的话，我希望图像能够像我设置导航栏一样拉伸窗口的大小。我似乎遇到的问题是我试图放置在导航栏后面的图像实际上是在它上面渲染的。请参阅下面的代码了解我在做什么。

CSS 样式：

/* PAGE TOP */
#pageTop {
    background: url('./img/transparentgradient.png') repeat-x;
    height: 90px;
}
#pageTop >  #pageTopImg {
    text-align: center;
}

HTML：

<div id="pageTop">
  <div id="pageTopImg">
    <img src="./img/dnd_dragon_photo.jpg"/>
  </div>
  <div id="pageTopWrap">
    <div id="pageTopLogo">
      <a href="#">
        <img src="./img/DnD_logo.png" alt="logo" title="Dungeons and Dragons">
      </a>
    </div>
    <div id="pageTopRest">
      <div id="menu">
        <div>
          <a href="#">Load character sheet</a>
        </div>
      </div>
    </div>
  </div>
</div>

在此先感谢您的帮助。由于这是我对 HTML/CSS 的介绍，如果我遗漏了什么或需要更多详细信息，请告诉我。

编辑 添加到演示站点的链接。导航栏带有蓝色调，您可以看到图像显示在它上面。

4

0 回答 0