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

Question

嗨，我是相当新的HTML / CSS / Javascript，我努力减少我的网页上的滑块旋转木马中的背景图像的大小。我正在尝试做的是缩小我的背景图像的大小，使其位于登录的顶部而不是下面，然后在我的登录后面有黑色背景。

请看我的网页图片> 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框中找到位置。

使用背景图像，您必须为父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>