html - 如何在不重叠网页内容的情况下减小背景图片的大小

Question

您好，我是 HTML/CSS/Javascript 的新手，我正在努力减小我网页上 slider 轮播中背景图片的大小。我想做的是减小背景图片的大小，使其位于我的登录名上方而不是下方，然后在我的登录名后面有一个黑色背景。

请看我的网页图片> https://imgur.com/NcqqZk1

    html body
    {
        margin:0;
        padding:0;
    }
    
    body{
        height:100%;
        background-color:black !important;
    }
    
    /*-------------header-----------*/
    
    
    header
    {
        height:110px;
        line-height: 110px;
        position:fixed;
        z-index:1;
        width:100%;
    }
    
    .secondary{
        background-color:darkorange;
        box-shadow:0px 0px 15px 0px;
        transition:all 0.5s ease-in-out;
    }
    
    /*-------------nav-----------*/
    
    
    ul
    {
        list-style:none;
       
    }
    
    ul li
    {
        display:inline-block;
        
    }
    
    header nav
    {
        float: right;
    }
    
    .logo img
    {
        margin-top:-20px;
        height:30px;
    }
    
    header nav ul li a 
    {
        padding-right: 25px;
        font-weight: bold;
        color: white;
        transition: all 0.5s ease-in;
    }
    
    header nav ul li a:hover
    {
        text-decoration: none;
        color:black;
    }
    
    /*-------------slider-----------*/
    
    
    .img1
    {
        background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work.jpg);
        background-size:100% 100%;
        
        
    }
    
    .slider,.slider ul,.slider ul li
    {
        height:100%;
        width:100%;
        color:white;
        text-align: center;
        padding:0px;
        
    }
    
    .slider h2
    {
        font-weight: bold;
        margin-top:260px;
    }
    
    .slider span
    {
        color:orange;
    }
    
    .slider a 
    {
        padding: 10px 40px;
        margin-right: 10px;
        
    }
    
    /*-------------slider-button-----------*/
    
    
    .slider a.btn-half
    
    {
        background-color: orange;
        color: white;
        width:200px;
    }
    
    .slider a.btn-half:hover
    {
        opacity:0.7;
        transition:0.5s ease-in;
    }
    
    
    
    
    .img2
    {
        background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work2.jpg);
        background-size:100% 100%;
    }
    
    .img3
    {
        background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work3.jpg);
        background-size:100% 100%;
    }
    
    .slider i
    {
        font-size:30px;
        margin-right:10px;
    }
    
    /*-------------login-----------*/
    
    
    
    .login-box
    {
        width:280px;
        position:absolute;
        top:1000px;
        left:50%;
        transform: translate(-50%, -50%);
        color:white;
    }
    
    .login-box h1 
    {
        width:100px;
        font-size:40px;
        border-bottom: 6px solid darkorange;
        margin-bottom:50px;
        padding:13 px 0;
    }
    
    .textbox
    {
        width:100%;
        overflow:hidden;
        font-size:20px;
        padding:8px 0;
        margin:8px 0;
        border-bottom: 1px solid darkorange;
    }
    
    .textbox i 
    {
        width:26px;
        float:left;
        text-align:center;
    }
    
    .textbox input
    {
        border:none;
        outline:none;
        background:none;
        color:white;
        font-size:17px;
        width:80%;
        float:left;
        margin:0 10px;
    }
    
    .btn
    {
        width:100%;
        background:none;
        border:2px solid darkorange;
        color:white;
        padding:5px;
        font-size:17px;
        cursor:pointer;
        margin:12px 0;
    }
    
    .btn:hover
    {
        opacity:0.7;
        transition:0.5s ease-in;
    }
    
    /*-------------FAQ-----------*/
    
    .fqcontainer
    {
        max-width: 60%;
        margin:0 auto;
        padding:70px 0 20px;
        width:100%;
    }
    
    
    .fqcontainer h1
    {
        text-align: center;
        font-family: 'roboto', 'sans-serif';
        font-size: 60px;
        margin:50px 0 0;
        color: white;
    }
    
    .acc
    {
        border-bottom:1px solid white;
    }
    
    .acc h3
    {
        font-size:25px;
        background-color: black rgba(0,0,0,0.6);
        color: white;
        padding:15px;
        margin:0;
        cursor:pointer;
        font-family:'roboto','sans-serif';
        letter-spacing: 2px;
        position:relative;
    }
    
    .acc h3:after
    {
        content: '+';
        position:absolute;
        right: 20px;
        font-size:40px;
        top:50%;
        transform:translateY(-50%);
    }
    
    .acc.active h3:after
    {
        content:'-';
    }
    
    .fqcontent
    {
        background-color:white;
        margin-top:0;
        line-height:1.5;
        display:none;
    }
    
    
    .content-inner
    {
        padding:15px;
        
    }
    
    
    
    
    
    /*-------------footer-----------*/
    
    
    .footer {
       width:100%;
        background-color: darkorange;
        padding:50px 0px;
        
        
    }
    
    
    footer nav
    {
        text-align:center;
    }
    
    
    footer nav ul li a 
    {
        padding-right: 25px;
        font-weight: bold;
        color: white;
        transition: all 0.5s ease-in;
    }
    
    footer nav ul li a:hover
    {
        text-decoration: none;
        color:black;
    }

   <html>
   <body>
        <!-------------Header/Nav----------->
        <header>
            <div class="container">
                <div class="row">
                    <a href="index.html" class="logo"><img src="logo.png"></a>
                    <nav>
                        <ul>
    
                            <li><a href="#login-box">Log In</a></li>
                            <li><a href="">FAQ</a></li>
                            <li><a href="">My Surveys</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
    
        <!-------------Slider----------->
    
        <section class="slider">
            <ul class="slider-carousel" id="slider-carousel">
    
                <li class="img1">
                    <h2>Slider<span>Slider</span></h2>
                    <p>Hello World</p>
                    <i class="fab fa-apple"></i>
                    <i class="fab fa-android"></i>
                    <i class="fab fa-windows"></i>
                    <p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
                    </p><br>
                    <a href="" class="btn btn-half">Get Started</a>
    
                </li>
    
    
                <li class="img2">
                    <h2>Slider<span>Slider</span></h2>
                    <p>Hello World</p>
                    <i class="fab fa-apple"></i>
                    <i class="fab fa-android"></i>
                    <i class="fab fa-windows"></i>
                    <p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
                    </p><br>
                    <a href="" class="btn btn-half">Get Started</a>
    
                </li>
    
    
                <li class="img3">
                    <h2>Slider<span>Slider</span></h2>
                    <p>Hello World</p>
                    <i class="fab fa-apple"></i>
                    <i class="fab fa-android"></i>
                    <i class="fab fa-windows"></i>
                    <p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
                    </p><br>
                    <a href="" class="btn btn-half">Get Started</a>
    
                </li>
    
            </ul>
    
        </section>
    
        <!-------------Login----------->
    
        <div class="login-box">
            <div id="login-box">
                <h1>Login</h1>
    
                <div class="textbox">
                    <i class="fas fa-user"></i>
                    <input type="text" placeholder="Username" name="" value="">
                </div>
    
    
                <div class="textbox">
                    <i class="fas fa-lock"></i>
                    <input type="text" placeholder="Password" name="" value="">
                </div>
    
                <input class="btn" type="button" name="" value="Sign In">
    
            </div>
        </div>
    
        <!-------------FAQ----------->
    
    
        <div class="fqcontainer">
            <h1>FAQ Section</h1>
            <div class="acc">
                <h3>Question 1: What is?</h3>
                <div class="fqcontent">
                    <div class="content-inner">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien turpis, tincidunt nec maximus et, elementum vel massa. Sed quis suscipit tortor, vel lacinia enim. Pellentesque posuere a urna eget fermentum. Vivamus tincidunt varius
                            turpis, eget suscipit arcu aliquam vel. Maecenas fermentum tellus vel euismod porttitor. Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod. Praesent nibh leo, auctor vel porttitor in, auctor et sapien. Nullam et
                            nulla rutrum, convallis tellus vitae, eleifend massa</p>
                    </div>
                </div>
            </div>
    
            <div class="acc">
                <h3>Question 1: What is?</h3>
                <div class="fqcontent">
                    <div class="content-inner">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien turpis, tincidunt nec maximus et, elementum vel massa. Sed quis suscipit tortor, vel lacinia enim. Pellentesque posuere a urna eget fermentum. Vivamus tincidunt varius
                            turpis, eget suscipit arcu aliquam vel. Maecenas fermentum tellus vel euismod porttitor. Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod. Praesent nibh leo, auctor vel porttitor in, auctor et sapien. Nullam et
                            nulla rutrum, convallis tellus vitae, eleifend massa</p>
                    </div>
                </div>
            </div>
    
            <div class="acc">
                <h3>Question 1: What is?</h3>
                <div class="fqcontent">
                    <div class="content-inner">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien turpis, tincidunt nec maximus et, elementum vel massa. Sed quis suscipit tortor, vel lacinia enim. Pellentesque posuere a urna eget fermentum. Vivamus tincidunt varius
                            turpis, eget suscipit arcu aliquam vel. Maecenas fermentum tellus vel euismod porttitor. Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod. Praesent nibh leo, auctor vel porttitor in, auctor et sapien. Nullam et
                            nulla rutrum, convallis tellus vitae, eleifend massa</p>
                    </div>
                </div>
            </div>
    
        </div>
    
        <!-------------Footer----------->
    
        <footer>
            <div class="footer">
                <nav>
                    <ul>
                        <li><a href="">Log In</a></li>
                        <li><a href="">FAQ</a></li>
                        <li><a href="">My Surveys</a></li>
                    </ul>
                </nav>
            </div>
        </footer>
        <script src="main.js"></script>
    </body>
    </html>

Answer 1

这就是您需要在您的 CSS 中更改/添加的内容:

/*-------------login-----------*/
.login-box{
  position: relative;
  height: 100vh;
}
#login-box {
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

您的登录部分 (.login-box) 的父 div 需要一个“位置”值(例如:position: relative)，然后您的登录框会在内部 .login-box。

对于背景图片，您必须为父 div 设置特定的高度。

如果您在 .login-box div 中使用图像标签，则该 div 将与图像本身一样高

运行示例(完整代码):

html body {
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  background-color: black !important;
}


/*-------------header-----------*/

header {
  height: 110px;
  line-height: 110px;
  position: fixed;
  z-index: 1;
  width: 100%;
}

.secondary {
  background-color: darkorange;
  box-shadow: 0px 0px 15px 0px;
  transition: all 0.5s ease-in-out;
}


/*-------------nav-----------*/

ul {
  list-style: none;
}

ul li {
  display: inline-block;
}

header nav {
  float: right;
}

.logo img {
  margin-top: -20px;
  height: 30px;
}

header nav ul li a {
  padding-right: 25px;
  font-weight: bold;
  color: white;
  transition: all 0.5s ease-in;
}

header nav ul li a:hover {
  text-decoration: none;
  color: black;
}


/*-------------slider-----------*/

.img1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url(http://lorempixel.com/1920/1080/);
  background-size: 100% 100%;
}

.slider,
.slider ul,
.slider ul li {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  padding: 0px;
}

.slider h2 {
  font-weight: bold;
  margin-top: 260px;
}

.slider span {
  color: orange;
}

.slider a {
  padding: 10px 40px;
  margin-right: 10px;
}


/*-------------slider-button-----------*/

.slider a.btn-half {
  background-color: orange;
  color: white;
  width: 200px;
}

.slider a.btn-half:hover {
  opacity: 0.7;
  transition: 0.5s ease-in;
}

.img2 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url(http://lorempixel.com/1920/1080/);
  background-size: 100% 100%;
}

.img3 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url(http://lorempixel.com/1920/1080/);
  background-size: 100% 100%;
}

.slider i {
  font-size: 30px;
  margin-right: 10px;
}


/*-------------login-----------*/
.login-box{
position: relative;
height: 100vh;
}
#login-box {
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.login-box h1 {
  width: 100px;
  font-size: 40px;
  border-bottom: 6px solid darkorange;
  margin-bottom: 50px;
  padding: 13 px 0;
}

.textbox {
  width: 100%;
  overflow: hidden;
  font-size: 20px;
  padding: 8px 0;
  margin: 8px 0;
  border-bottom: 1px solid darkorange;
}

.textbox i {
  width: 26px;
  float: left;
  text-align: center;
}

.textbox input {
  border: none;
  outline: none;
  background: none;
  color: white;
  font-size: 17px;
  width: 80%;
  float: left;
  margin: 0 10px;
}

.btn {
  width: 100%;
  background: none;
  border: 2px solid darkorange;
  color: white;
  padding: 5px;
  font-size: 17px;
  cursor: pointer;
  margin: 12px 0;
}

.btn:hover {
  opacity: 0.7;
  transition: 0.5s ease-in;
}


/*-------------FAQ-----------*/

.fqcontainer {
  max-width: 60%;
  margin: 0 auto;
  padding: 70px 0 20px;
  width: 100%;
}

.fqcontainer h1 {
  text-align: center;
  font-family: 'roboto', 'sans-serif';
  font-size: 60px;
  margin: 50px 0 0;
  color: white;
}

.acc {
  border-bottom: 1px solid white;
}

.acc h3 {
  font-size: 25px;
  background-color: black rgba(0, 0, 0, 0.6);
  color: white;
  padding: 15px;
  margin: 0;
  cursor: pointer;
  font-family: 'roboto', 'sans-serif';
  letter-spacing: 2px;
  position: relative;
}

.acc h3:after {
  content: '+';
  position: absolute;
  right: 20px;
  font-size: 40px;
  top: 50%;
  transform: translateY(-50%);
}

.acc.active h3:after {
  content: '-';
}

.fqcontent {
  background-color: white;
  margin-top: 0;
  line-height: 1.5;
  display: none;
}

.content-inner {
  padding: 15px;
}


/*-------------footer-----------*/

.footer {
  width: 100%;
  background-color: darkorange;
  padding: 50px 0px;
}

footer nav {
  text-align: center;
}

footer nav ul li a {
  padding-right: 25px;
  font-weight: bold;
  color: white;
  transition: all 0.5s ease-in;
}

footer nav ul li a:hover {
  text-decoration: none;
  color: black;
}


/* CHANGES */

.slider {
  overflow: hidden;
  max-height: 100vh;
}

<body>

  <!-------------Header/Nav----------->


  <header>
    <div class="container">
      <div class="row">
        <a href="index.html" class="logo"><img src="logo.png"></a>
        <nav>
          <ul>

            <li><a href="#login-box">Log In</a></li>
            <li><a href="">FAQ</a></li>
            <li><a href="">My Surveys</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

  <!-------------Slider----------->

  <section class="slider">
    <ul class="slider-carousel" id="slider-carousel">

      <li class="img1">
        <h2>Slider<span>Slider</span></h2>
        <p>Hello World</p>
        <i class="fab fa-apple"></i>
        <i class="fab fa-android"></i>
        <i class="fab fa-windows"></i>
        <p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
        </p><br>
        <a href="" class="btn btn-half">Get Started</a>

      </li>


      <li class="img2">
        <h2>Slider<span>Slider</span></h2>
        <p>Hello World</p>
        <i class="fab fa-apple"></i>
        <i class="fab fa-android"></i>
        <i class="fab fa-windows"></i>
        <p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
        </p><br>
        <a href="" class="btn btn-half">Get Started</a>

      </li>


      <li class="img3">
        <h2>Slider<span>Slider</span></h2>
        <p>Hello World</p>
        <i class="fab fa-apple"></i>
        <i class="fab fa-android"></i>
        <i class="fab fa-windows"></i>
        <p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
        </p><br>
        <a href="" class="btn btn-half">Get Started</a>

      </li>

    </ul>

  </section>

  <!-------------Login----------->

  <div class="login-box">
    <div id="login-box">
      <h1>Login</h1>

      <div class="textbox">
        <i class="fas fa-user"></i>
        <input type="text" placeholder="Username" name="" value="">
      </div>


      <div class="textbox">
        <i class="fas fa-lock"></i>
        <input type="text" placeholder="Password" name="" value="">
      </div>

      <input class="btn" type="button" name="" value="Sign In">

    </div>
  </div>

  <!-------------FAQ----------->


  <div class="fqcontainer">
    <h1>FAQ Section</h1>
    <div class="acc">
      <h3>Question 1: What is?</h3>
      <div class="fqcontent">
        <div class="content-inner">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien turpis, tincidunt nec maximus et, elementum vel massa. Sed quis suscipit tortor, vel lacinia enim. Pellentesque posuere a urna eget fermentum. Vivamus tincidunt varius turpis,
            eget suscipit arcu aliquam vel. Maecenas fermentum tellus vel euismod porttitor. Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod. Praesent nibh leo, auctor vel porttitor in, auctor et sapien. Nullam et nulla rutrum, convallis
            tellus vitae, eleifend massa</p>
        </div>
      </div>
    </div>

    <div class="acc">
      <h3>Question 1: What is?</h3>
      <div class="fqcontent">
        <div class="content-inner">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien turpis, tincidunt nec maximus et, elementum vel massa. Sed quis suscipit tortor, vel lacinia enim. Pellentesque posuere a urna eget fermentum. Vivamus tincidunt varius turpis,
            eget suscipit arcu aliquam vel. Maecenas fermentum tellus vel euismod porttitor. Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod. Praesent nibh leo, auctor vel porttitor in, auctor et sapien. Nullam et nulla rutrum, convallis
            tellus vitae, eleifend massa</p>
        </div>
      </div>
    </div>

    <div class="acc">
      <h3>Question 1: What is?</h3>
      <div class="fqcontent">
        <div class="content-inner">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien turpis, tincidunt nec maximus et, elementum vel massa. Sed quis suscipit tortor, vel lacinia enim. Pellentesque posuere a urna eget fermentum. Vivamus tincidunt varius turpis,
            eget suscipit arcu aliquam vel. Maecenas fermentum tellus vel euismod porttitor. Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod. Praesent nibh leo, auctor vel porttitor in, auctor et sapien. Nullam et nulla rutrum, convallis
            tellus vitae, eleifend massa</p>
        </div>
      </div>
    </div>

  </div>

  <!-------------Footer----------->

  <footer>
    <div class="footer">
      <nav>
        <ul>
          <li><a href="">Log In</a></li>
          <li><a href="">FAQ</a></li>
          <li><a href="">My Surveys</a></li>
        </ul>
      </nav>
    </div>
  </footer>


  <script src="main.js"></script>

</body>

</html>