如何在不重叠网页内容的情况下缩小背景图片的大小
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在不重叠网页内容的情况下缩小背景图片的大小相关的知识，希望对你有一定的参考价值。
嗨，我是相当新的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>答案
多数民众赞成你需要改变/添加你的CSS：
/*-------------login-----------*/
.login-box{
position: relative;
height: 100vh;
}
#login-box {
width: 280px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}以上是关于如何在不重叠网页内容的情况下缩小背景图片的大小的主要内容，如果未能解决你的问题，请参考以下文章
如何在不使用“内容长度”标头的情况下查看网页中的所有文件大小？