当前位置： 文江博客 话题详情

问题“隐藏” <主要>标题后面的内容

发布于 2025-01-10 17:43:37 字数 5461 浏览 0 评论 0 原文

我无法弄清楚如何“隐藏”本网站标题后面的主体内容。目前该工作仍在进行中。即使我将其设置为 z-index:10 和position:fixed，标题看起来也是透明的。任何帮助将不胜感激。

https://gbears96.github.io/bigStart/

这是代码：

html {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  background-color: #fffcf6;
  margin: 0;
}

header {
  display: flex;
  align-items: center;
  /*margin:0 auto;*/
  position: fixed;
  width: 100%;
  z-index: 100;
  top: 0px;
  border: 2px pink solid;
}

.header-content {
  display: flex;
  align-items: center;
  border-bottom: 0.5px solid #002F6C;
  width: 100%;
}

#logo {
  max-height: 5rem;
}

#spacer {
  max-height: 10rem;
  flex: 1;
}

header nav {
  display: block;
  font-size: 0.75rem;
}

header nav ul {
  display: flex;
  list-style: none;
}

header nav li {
  padding-right: 3rem;
}

header nav li a {
  text-decoration: none;
  color: #002F6C;
  text-transform: uppercase;
}

.main {
  position: relative;
  top: 100px;
}

.mission-section {
  /*    background-image: url("../images/downtown.jpeg"); */
  display: flex;
  justify-content: center;
  height: 20rem;
  border-bottom: 0.5px solid #002F6C;
  width: 100%;
  align-items: center;
  border: 2px pink solid;
}

.mission-section h1 {
  font-family: "Times New Roman", serif;
  font-weight: lighter;
  font-size: 3em;
}

.mission-content {
  align-items: center;
}

.features-section {
  display: flex;
  justify-content: space-between;
  padding: 0rem;
  width: 100%;
  margin: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-left: 0.5px solid #002F6C;
  border: 2px pink solid;
}

.features-section .feature {
  display: flex;
  border-right: 0.5px solid #002F6C;
  /* padding: 0% 1%; */
}

.feature .center {
  text-align: center;
  width: 100%;
}

.feature h2 {
  font-family: "Times New Roman", serif;
  font-weight: lighter;
  font-size: 2em;
}

.feature h3 {
  font-family: "Times New Roman", serif;
  font-weight: lighter;
  font-size: 1.5em;
}

.feature .image-container {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.image-container img {
  display: block;
  width: 95%;
  height: 95%;
  margin: 0 auto;
}

.feature .content {}

.team-section {
  display: flex;
  width: 100%;
  border: 2px pink solid;
}

.images-container {
  display: flex;
  max-width: 100%;
  padding: 0 1%;
  border: 1px solid pink;
}
<DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BigStart Company Homepage</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>

  <body>
    <!-- Header -->
    <header>
      <div class="header-content">
        <!-- Content: logo + nav bar on right -->
        <img src="./images/bigstart2.png" id="logo">
        <div id="spacer"></div>
        <nav>
          <ul>
            <li>
              <a href="#">About</a>
            </li>
            <li>
              <a href="#">Products</a>
            </li>
            <li>
              <a href="#">Team</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

    <div class="main">
      <!-- Mission Statement -->
      <div class="mission-section">
        <div class="mission-content">
          <h1 class="mission-motto">We take your company from idea to reality.</h1>
        </div>
      </div>

      <!-- TEMP

         <div class="temp">
             <h1> hi </h1>
         </div> -->

      <!-- Images of Features -->
      <div class="features-section">
        <div class="feature">
          <div class="center">
            <div class="image-container">
              <img src="./images/startup-square.jpg">
            </div>
            <div class="content">
              <h2>The concept.</h2>
              <h3>We take that idea...</h3>
            </div>
          </div>
        </div>
        <div class="feature">
          <div class="center">
            <div class="image-container">
              <img src="./images/metaverse.jpeg">
            </div>
            <div class="content">
              <h2>The future.</h2>
              <h3>... and turn it into the next big thing.</h3>
            </div>
          </div>
        </div>
      </div>
      <!-- Team -->
      <div class="team-section">
        <div class="team-center">
          <h1> hi </h1>
        </div>
        <div class="images-container">
          <div class="image-container">
            <h2>1</h2>
            <h2>2</h2>
            <h2>3</h2>
            <h2>4</h2>
          </div>
        </div>
      </div>


      </main>
  </body>

  </html>

原文

I'm not able to figure out how to "hide" the main body content behind my header on this site. It's still a work-in-progress. The header appears to be transparent, even when I set it to z-index:10 and position:fixed. Any help would be greatly appreciated.

https://gbears96.github.io/bigStart/

Here's the code:

html {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  background-color: #fffcf6;
  margin: 0;
}

header {
  display: flex;
  align-items: center;
  /*margin:0 auto;*/
  position: fixed;
  width: 100%;
  z-index: 100;
  top: 0px;
  border: 2px pink solid;
}

.header-content {
  display: flex;
  align-items: center;
  border-bottom: 0.5px solid #002F6C;
  width: 100%;
}

#logo {
  max-height: 5rem;
}

#spacer {
  max-height: 10rem;
  flex: 1;
}

header nav {
  display: block;
  font-size: 0.75rem;
}

header nav ul {
  display: flex;
  list-style: none;
}

header nav li {
  padding-right: 3rem;
}

header nav li a {
  text-decoration: none;
  color: #002F6C;
  text-transform: uppercase;
}

.main {
  position: relative;
  top: 100px;
}

.mission-section {
  /*    background-image: url("../images/downtown.jpeg"); */
  display: flex;
  justify-content: center;
  height: 20rem;
  border-bottom: 0.5px solid #002F6C;
  width: 100%;
  align-items: center;
  border: 2px pink solid;
}

.mission-section h1 {
  font-family: "Times New Roman", serif;
  font-weight: lighter;
  font-size: 3em;
}

.mission-content {
  align-items: center;
}

.features-section {
  display: flex;
  justify-content: space-between;
  padding: 0rem;
  width: 100%;
  margin: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-left: 0.5px solid #002F6C;
  border: 2px pink solid;
}

.features-section .feature {
  display: flex;
  border-right: 0.5px solid #002F6C;
  /* padding: 0% 1%; */
}

.feature .center {
  text-align: center;
  width: 100%;
}

.feature h2 {
  font-family: "Times New Roman", serif;
  font-weight: lighter;
  font-size: 2em;
}

.feature h3 {
  font-family: "Times New Roman", serif;
  font-weight: lighter;
  font-size: 1.5em;
}

.feature .image-container {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.image-container img {
  display: block;
  width: 95%;
  height: 95%;
  margin: 0 auto;
}

.feature .content {}

.team-section {
  display: flex;
  width: 100%;
  border: 2px pink solid;
}

.images-container {
  display: flex;
  max-width: 100%;
  padding: 0 1%;
  border: 1px solid pink;
}
<DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BigStart Company Homepage</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>

  <body>
    <!-- Header -->
    <header>
      <div class="header-content">
        <!-- Content: logo + nav bar on right -->
        <img src="./images/bigstart2.png" id="logo">
        <div id="spacer"></div>
        <nav>
          <ul>
            <li>
              <a href="#">About</a>
            </li>
            <li>
              <a href="#">Products</a>
            </li>
            <li>
              <a href="#">Team</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

    <div class="main">
      <!-- Mission Statement -->
      <div class="mission-section">
        <div class="mission-content">
          <h1 class="mission-motto">We take your company from idea to reality.</h1>
        </div>
      </div>

      <!-- TEMP

         <div class="temp">
             <h1> hi </h1>
         </div> -->

      <!-- Images of Features -->
      <div class="features-section">
        <div class="feature">
          <div class="center">
            <div class="image-container">
              <img src="./images/startup-square.jpg">
            </div>
            <div class="content">
              <h2>The concept.</h2>
              <h3>We take that idea...</h3>
            </div>
          </div>
        </div>
        <div class="feature">
          <div class="center">
            <div class="image-container">
              <img src="./images/metaverse.jpeg">
            </div>
            <div class="content">
              <h2>The future.</h2>
              <h3>... and turn it into the next big thing.</h3>
            </div>
          </div>
        </div>
      </div>
      <!-- Team -->
      <div class="team-section">
        <div class="team-center">
          <h1> hi </h1>
        </div>
        <div class="images-container">
          <div class="image-container">
            <h2>1</h2>
            <h2>2</h2>
            <h2>3</h2>
            <h2>4</h2>
          </div>
        </div>
      </div>


      </main>
  </body>

  </html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

绳情 2025-01-17 17:43:37

background-color 的默认值是透明的，直到与其他元素重叠时才明显，如果您不希望它如此，则必须给它另一个值（即添加 background -color: #fff 在你的标题上）。请参阅下面的片段：

html {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  background-color: #fffcf6;
  margin: 0;
}

header {
  display: flex;
  align-items: center;
  /*margin:0 auto;*/
  position: fixed;
  width: 100%;
  z-index: 100;
  top: 0px;
  border: 2px pink solid;
  background: #fff;
}

.header-content {
  display: flex;
  align-items: center;
  border-bottom: 0.5px solid #002F6C;
  width: 100%;
}

#logo {
  max-height: 5rem;
}

#spacer {
  max-height: 10rem;
  flex: 1;
}

header nav {
  display: block;
  font-size: 0.75rem;
}

header nav ul {
  display: flex;
  list-style: none;
}

header nav li {
  padding-right: 3rem;
}

header nav li a {
  text-decoration: none;
  color: #002F6C;
  text-transform: uppercase;
}

.main {
  position: relative;
  top: 100px;
}

.mission-section {
  /*    background-image: url("../images/downtown.jpeg"); */
  display: flex;
  justify-content: center;
  height: 20rem;
  border-bottom: 0.5px solid #002F6C;
  width: 100%;
  align-items: center;
  border: 2px pink solid;
}

.mission-section h1 {
  font-family: "Times New Roman", serif;
  font-weight: lighter;
  font-size: 3em;
}

.mission-content {
  align-items: center;
}

.features-section {
  display: flex;
  justify-content: space-between;
  padding: 0rem;
  width: 100%;
  margin: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-left: 0.5px solid #002F6C;
  border: 2px pink solid;
}

.features-section .feature {
  display: flex;
  border-right: 0.5px solid #002F6C;
  /* padding: 0% 1%; */
}

.feature .center {
  text-align: center;
  width: 100%;
}

.feature h2 {
  font-family: "Times New Roman", serif;
  font-weight: lighter;
  font-size: 2em;
}

.feature h3 {
  font-family: "Times New Roman", serif;
  font-weight: lighter;
  font-size: 1.5em;
}

.feature .image-container {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.image-container img {
  display: block;
  width: 95%;
  height: 95%;
  margin: 0 auto;
}

.feature .content {}

.team-section {
  display: flex;
  width: 100%;
  border: 2px pink solid;
}

.images-container {
  display: flex;
  max-width: 100%;
  padding: 0 1%;
  border: 1px solid pink;
}
<DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BigStart Company Homepage</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>

  <body>
    <!-- Header -->
    <header>
      <div class="header-content">
        <!-- Content: logo + nav bar on right -->
        <img src="./images/bigstart2.png" id="logo">
        <div id="spacer"></div>
        <nav>
          <ul>
            <li>
              <a href="#">About</a>
            </li>
            <li>
              <a href="#">Products</a>
            </li>
            <li>
              <a href="#">Team</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

    <div class="main">
      <!-- Mission Statement -->
      <div class="mission-section">
        <div class="mission-content">
          <h1 class="mission-motto">We take your company from idea to reality.</h1>
        </div>
      </div>

      <!-- TEMP

         <div class="temp">
             <h1> hi </h1>
         </div> -->

      <!-- Images of Features -->
      <div class="features-section">
        <div class="feature">
          <div class="center">
            <div class="image-container">
              <img src="./images/startup-square.jpg">
            </div>
            <div class="content">
              <h2>The concept.</h2>
              <h3>We take that idea...</h3>
            </div>
          </div>
        </div>
        <div class="feature">
          <div class="center">
            <div class="image-container">
              <img src="./images/metaverse.jpeg">
            </div>
            <div class="content">
              <h2>The future.</h2>
              <h3>... and turn it into the next big thing.</h3>
            </div>
          </div>
        </div>
      </div>
      <!-- Team -->
      <div class="team-section">
        <div class="team-center">
          <h1> hi </h1>
        </div>
        <div class="images-container">
          <div class="image-container">
            <h2>1</h2>
            <h2>2</h2>
            <h2>3</h2>
            <h2>4</h2>
          </div>
        </div>
      </div>


      </main>
  </body>

  </html>

参考自 w3schools。

Default value of background-color is transparent, it just wasn't noticeable until it overlaps with other elements, you have to give it another value if you want it not to be (i.e. add background-color: #fff on your header). See the snippet below:

html {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  background-color: #fffcf6;
  margin: 0;
}

header {
  display: flex;
  align-items: center;
  /*margin:0 auto;*/
  position: fixed;
  width: 100%;
  z-index: 100;
  top: 0px;
  border: 2px pink solid;
  background: #fff;
}

.header-content {
  display: flex;
  align-items: center;
  border-bottom: 0.5px solid #002F6C;
  width: 100%;
}

#logo {
  max-height: 5rem;
}

#spacer {
  max-height: 10rem;
  flex: 1;
}

header nav {
  display: block;
  font-size: 0.75rem;
}

header nav ul {
  display: flex;
  list-style: none;
}

header nav li {
  padding-right: 3rem;
}

header nav li a {
  text-decoration: none;
  color: #002F6C;
  text-transform: uppercase;
}

.main {
  position: relative;
  top: 100px;
}

.mission-section {
  /*    background-image: url("../images/downtown.jpeg"); */
  display: flex;
  justify-content: center;
  height: 20rem;
  border-bottom: 0.5px solid #002F6C;
  width: 100%;
  align-items: center;
  border: 2px pink solid;
}

.mission-section h1 {
  font-family: "Times New Roman", serif;
  font-weight: lighter;
  font-size: 3em;
}

.mission-content {
  align-items: center;
}

.features-section {
  display: flex;
  justify-content: space-between;
  padding: 0rem;
  width: 100%;
  margin: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-left: 0.5px solid #002F6C;
  border: 2px pink solid;
}

.features-section .feature {
  display: flex;
  border-right: 0.5px solid #002F6C;
  /* padding: 0% 1%; */
}

.feature .center {
  text-align: center;
  width: 100%;
}

.feature h2 {
  font-family: "Times New Roman", serif;
  font-weight: lighter;
  font-size: 2em;
}

.feature h3 {
  font-family: "Times New Roman", serif;
  font-weight: lighter;
  font-size: 1.5em;
}

.feature .image-container {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.image-container img {
  display: block;
  width: 95%;
  height: 95%;
  margin: 0 auto;
}

.feature .content {}

.team-section {
  display: flex;
  width: 100%;
  border: 2px pink solid;
}

.images-container {
  display: flex;
  max-width: 100%;
  padding: 0 1%;
  border: 1px solid pink;
}
<DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BigStart Company Homepage</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>

  <body>
    <!-- Header -->
    <header>
      <div class="header-content">
        <!-- Content: logo + nav bar on right -->
        <img src="./images/bigstart2.png" id="logo">
        <div id="spacer"></div>
        <nav>
          <ul>
            <li>
              <a href="#">About</a>
            </li>
            <li>
              <a href="#">Products</a>
            </li>
            <li>
              <a href="#">Team</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

    <div class="main">
      <!-- Mission Statement -->
      <div class="mission-section">
        <div class="mission-content">
          <h1 class="mission-motto">We take your company from idea to reality.</h1>
        </div>
      </div>

      <!-- TEMP

         <div class="temp">
             <h1> hi </h1>
         </div> -->

      <!-- Images of Features -->
      <div class="features-section">
        <div class="feature">
          <div class="center">
            <div class="image-container">
              <img src="./images/startup-square.jpg">
            </div>
            <div class="content">
              <h2>The concept.</h2>
              <h3>We take that idea...</h3>
            </div>
          </div>
        </div>
        <div class="feature">
          <div class="center">
            <div class="image-container">
              <img src="./images/metaverse.jpeg">
            </div>
            <div class="content">
              <h2>The future.</h2>
              <h3>... and turn it into the next big thing.</h3>
            </div>
          </div>
        </div>
      </div>
      <!-- Team -->
      <div class="team-section">
        <div class="team-center">
          <h1> hi </h1>
        </div>
        <div class="images-container">
          <div class="image-container">
            <h2>1</h2>
            <h2>2</h2>
            <h2>3</h2>
            <h2>4</h2>
          </div>
        </div>
      </div>


      </main>
  </body>

  </html>

Reference from w3schools.

回复 原文
眼泪淡了忧伤 2025-01-17 17:43:37

我认为在 @Yong 的答案中添加 background-color 不继承是非常重要。因此，无论父元素的背景颜色如何，所有元素的默认背景颜色值都是透明的。

因此，将 HTML 元素设置为 background-color

 html {
  :
  background-color: #fffcf6;
}

后，不会将正文和所有其他封闭元素设置为该颜色，它们都将保持透明。

解决你的问题的方法是改变标题background-color的值；正如@Yong 所说，当您运行代码时，它默认为透明。给它任何其他值就可以解决这个问题。例如，与页面其余部分具有相同的颜色：

header {
  display: flex;
  align-items: center;
  /*margin:0 auto;*/
  position: fixed;
  width: 100%;
  z-index: 100;
  top: 0px;
  border: 2px pink solid;
  background: #fffcf6;
}

以下是来自 developer.mozilla 和 w3schools 有关背景颜色属性的信息。

I think it is very important to add to @Yong's answer that background-color does not inherit. Therefore the default background-color value for ALL elements is transparent regardless of parent background-color.

So setting your HTML element background-color to

 html {
  :
  background-color: #fffcf6;
}

does not then set the body and all other enclosing elements to this color, they will all remain transparent.

The way to solve your problem is to change the value of the header background-color; as @Yong said it is defaulting to transparent when you run your code. Giving it any other value will solve it. E.g to have it same color as the rest of the page:

header {
  display: flex;
  align-items: center;
  /*margin:0 auto;*/
  position: fixed;
  width: 100%;
  z-index: 100;
  top: 0px;
  border: 2px pink solid;
  background: #fffcf6;
}

Here are some useful references from developer.mozilla and w3schools about the background-color property.

回复 原文
~没有更多了~

关于作者

茶色山野

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

微信用户

文章 0 评论 0

小情绪

文章 0 评论 0

追我者格杀勿论

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

笨死的猪

文章 0 评论 0

彭明超

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文