HTML/CSS英雄横幅破坏内容页面

xesrikrc 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(136)

我在几周前发布了一个类似的问题，我已经准备好了。但是内容和页脚的DIVS位置非常错误。我希望它们打印在每一页的图像下面，所以当页面打开时，我选择的图像占据了整个屏幕，但是你可以向下滚动来查看更多的内容。现在它仍然只是显示在图像的上方。我会给予我的主页和样式表下面的代码片段（是的，它的一个学校项目，所以它的随机的东西）

body,
html {
  height: 100%;
  width: 100%;
  font-size: 100%;
  background-color: #333;
}

h1 {
  font-size: 5em;
}

h2 {
  font-size: 2.5em;
}

.content {
  font-family: sans-serif;
  margin: 10%;
  font-size: 170%;
  border: 10px outset orange;
  color: white;
  text-align: bottom;
  padding: 1.5%;
  line-height: 100%;
  position: static;
  border-style: solid;
  border: 2px;
  border-color: white;
  background-color: pink;
}

.footer {
  font-family: sans-serif;
  margin: 10%;
  font-size: 170%;
  border: 10px outset orange;
  color: white;
  text-align: bottom;
  padding: 1.5%;
  line-height: 100%;
  position: static;
  border-style: solid;
  border: 2px;
  border-color: white;
  background-color: purple
}

/* The hero image */

.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("blackred.webp");
  /* Set a specific height */
  height: 100%;
  width: 100%;
  /* Position and center the image to scale nicely on all screens */
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 0%;
  margin-bottom: 0%;
  margin-right: 0%;
  margin-left: 0%;
  position: absolute;
}

/* Place text in the middle of the image */

.hero-text {
  font-family: 'Arial';
  position: center;
  margin-top: 10%;
  margin-bottom: auto;
  margin-right: auto;
  margin-left: auto;
  color: white;
  text-align: center;
  font-size: 150%;
}

/* Navbar container */

.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

/* Links inside the navbar */

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */

.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  /* Important for vertical align on mobile phones */
  margin: 0;
  /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: white;
  color: black;
}

/* Dropdown content (hidden by default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Links inside the dropdown */

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}

.button {
  background-color: black;
  border: 2px solid white;
  border-color: #FFFFF;
  color: white;
  padding: 10px 30px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
}

.button:hover {
  background-color: white;
  color: black;
}

.hero-image-valorant {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("valorant3.jpg");
  /* Set a specific height */
  height: 100%;
  width: 100%;
  /* Position and center the image to scale nicely on all screens */
  background-position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
}

.hero-image-LOL {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("LOL1.jfif");
  /* Set a specific height */
  height: 100%;
  width: 100%;
  /* Position and center the image to scale nicely on all screens */
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
}

.hero-image-RL {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("RL1.webp");
  /* Set a specific height */
  height: 100%;
  width: 100%;
  /* Position and center the image to scale nicely on all screens */
  background-position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
}

<div class="navbar">
  <a href="index.htm">Home</a>
  <a href="signup.htm">Sign up</a>
  <a href="about.htm">About us!</a>
  <div class="dropdown">
    <button class="dropbtn">Our teams ▼
            </button>
    <div class="dropdown-content">
      <a href="LOL.htm">League of legends</a>
      <a href="valorant.htm">Valorant</a>
      <a href="RL.htm">Rocket league</a>

    </div>
  </div>
</div>
<div class="hero-image">
  <div class="hero-text">
    <img src="RCLOGO.png" alt="RCLOGO">
    <h2>E sports team</h2>
    <p>check out the navigation links above to learn about us!</p>
    <p>OR:</p>
    <a class="button" href="signup.htm">Join now</a>
  </div>
  <div class="content">
    <p>CONTENT</p>
  </div>
  <div class="footer">
    <p>FOOTER</p>
  </div>
</div>

我试图改变绝对定位使用百分比和边距，但这不工作，背景图像是唯一的东西，dosent似乎没有它的工作。我期待的图像选择，以填补屏幕上的标题文本居中（这是工作），然后向下滚动到段落的内容（这是不工作）

css

来源：https://stackoverflow.com/questions/75785435/html-css-hero-banner-ruining-content-pages

1条答案

按热度按时间

aiazj4mn1#

您的内容位于图像的顶部，因为您的内容和页脚嵌套在英雄图像div中。将结束div标签移动到内容div之前，这种情况就不会发生：

* {
    box-sizing: border-box;
}

body,
html {
    /* height: 100%; */
    /* width: 100%; */
    /* font-size: 100%; */
}

body {
    background-color: #333;
}

h1 {
    font-size: 5em;
}

h2 {
    font-size: 2.5em;
}

.content {
    font-family: sans-serif;
    margin: 10%;
    font-size: 170%;
    border: 10px outset orange;
    color: white;
    text-align: bottom;
    padding: 1.5%;
    line-height: 100%;
    /* position: static; */
    border-style: solid;
    border: 2px;
    border-color: white;
    background-color:pink;

}

.footer {
    font-family: sans-serif;
    margin: 10%;
    font-size: 170%;
    border: 10px outset orange;
    color: white;
    text-align: bottom;
    padding: 1.5%;
    line-height: 100%;
    position: static;
    border-style: solid;
    border: 2px;
    border-color: white;
    background-color:purple
    
    
}

/* The hero image */
.hero-image {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("blackred.webp");

    /* Set a specific height */
    /* height: 100%; */
    width: 100%;
    min-height: 800px;

    /* Position and center the image to scale nicely on all screens */
    
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 0 0 0;
    /* position:absolute; */

}

/* Place text in the middle of the image */
.hero-text {
    font-family: 'Arial';
    position:center;
    /* margin-top: 10%;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto; */
    color: white;
    text-align: center;
    font-size: 150%;
}

/* Navbar container */
.navbar {
    overflow: hidden;
    background-color: #333;
    font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* The dropdown container */
.dropdown {
    float: left;
    overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    /* Important for vertical align on mobile phones */
    margin: 0;
    /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover,
.dropdown:hover .dropbtn {
    background-color: white;
    color: black;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

.button {
    background-color: black;
    border: 2px solid white;
    border-color: #FFF;
    color: white;
    padding: 10px 30px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
}

.button:hover {
    background-color: white;
    color: black;
}

.hero-image-valorant {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("valorant3.jpg");

    /* Set a specific height */
    height: 100%;
    width: 100%;

    /* Position and center the image to scale nicely on all screens */
    background-position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;

}

.hero-image-LOL {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("LOL1.jfif");

    /* Set a specific height */
    height: 100%;
    width: 100%;

    /* Position and center the image to scale nicely on all screens */
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;

}

.hero-image-RL {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("RL1.webp");

    /* Set a specific height */
    height: 100%;
    width: 100%;

    /* Position and center the image to scale nicely on all screens */
    background-position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;

}

<!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">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <div class="navbar">
        <a href="index.htm">Home</a>
        <a href="signup.htm">Sign up</a>
        <a href="about.htm">About us!</a>
        <div class="dropdown">
           <button class="dropbtn">Our teams ▼
           </button>
           <div class="dropdown-content">
              <a href="LOL.htm">League of legends</a>
              <a href="valorant.htm">Valorant</a>
              <a href="RL.htm">Rocket league</a>
              
           </div>
        </div>
     </div>
     <div class="hero-image">
        <div class="hero-text">
           <img src="RCLOGO.png" alt="RCLOGO">
           <h2>E sports team</h2>
           <p>check out the navigation links above to learn about us!</p>
           <p>OR:</p>
           <a class = "button" href = "signup.htm">Join now</a>
        </div>
    </div>
    <div class ="content">
        <p>CONTENT</p>
    </div>
    <div class ="footer">
       <p>FOOTER</p>
    </div>
</body>
</html>

至于英雄形象，如果你想让实际的形象占据整个视口的空间，你可能会遇到图像拉伸或收缩以塑造它的布局的问题，但我不能肯定，因为我没有看到图像。
每当我想要一个英雄形象，我使用flexbox，但同样，我会使用它的方式取决于我的设计去。你也可以设置一个最小高度到一个特定的像素数量，但这不是一个很好的解决方案，为响应网站。希望有帮助！

赞(0）回复(0）举报 2023-03-20

我来回答

HTML/CSS英雄横幅破坏内容页面

1条答案

相关问题

热门标签

最新问答