如何使背景圖片適合整個屏幕CSS / HTML

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");
}