Question

对此我还很陌生，我一直试图在网页上设置一个滑块旋转木马，但我一直在努力查看为什么我的背景图像的宽度不能适合整个屏幕。左侧有一些空白。我敢肯定某些原因是显而易见的，但我看不到，请在下面找到我的代码。

 *
html body
{
    margin:0;
    padding:0;
}

body{
    height:3000px;
}

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;
}

ul
{
    list-style:none;

}

ul li
{
    display:inline-block;
}

header nav
{
    float: right;
}

.logo img
{
    margin-top:25px;
}

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;
}

.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:700px;
    width:100%;
    color:white;
    text-align: center;

}

.slider h2
{
    font-weight: bold;
    margin-top:260px;
}

.slider span
{
    color:orange;
}

.slider a 
{
    padding: 10px 40px;
    margin-right: 10px;

}

.slider a.btn-half

{
    background-color: orange;
    color: white;
}

.slider a.btn-half:hover
{
    opacity:0.7;
    transition:0.5s ease-in;
}

.slider a.btn-full
{
    background-color: black;
    color: white;
}

.slider a.btn-full: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;
}

<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>
		<a href="" class="btn btn-full">Lets Go</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>
		<a href="" class="btn btn-full">Lets Go</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>
		<a href="" class="btn btn-full">Lets Go</a>
		</li>

	</ul>

</section>

Answer 1

您需要设置background-size: cover;

Answer 2

使用此代码并尝试。

body {
  background-image: url("xxxx.jpg");
}

如何使背景图片适合整个屏幕CSS / HTML

2 个答案: