如何让CSS/HTML轮播背景图适配全屏？左侧留白问题求助

嘿，我仔细看了你的代码，马上就找到了导致轮播背景图左侧留白的关键问题，咱们一步步来修复：

问题排查与原因分析 #

1. 错误的全局重置选择器：你写的* html body { margin:0; padding:0; }是针对IE6的过时写法，现在根本不会生效，这导致html/body可能还带着默认的边距。
2. ul的默认内边距未清除：浏览器默认会给<ul>元素添加padding-left: 40px，你只去掉了列表样式，但没清除这个内边距，这就是左侧留白的核心原因。
3. 背景图尺寸设置不够合理：background-size:100% 100%;会强制图片拉伸填满容器，容易导致图片变形，不如用cover属性保证图片比例的同时覆盖整个容器。

修改后的完整代码 #

CSS 部分

/* 正确的全局重置，覆盖所有元素的默认边距和内边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 避免内边距撑宽元素 */
}

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; 
  padding-left: 0; /* 清除ul默认的左侧内边距 */
}

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: cover;
  background-position: center center;
}

.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: cover;
  background-position: center center;
}

.img3 { 
  background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work3.jpg); 
  background-size: cover;
  background-position: center center;
}

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

HTML 部分（无需修改，保持原代码即可）

<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>

关键修复点总结 #

• 用* { margin:0; padding:0; box-sizing: border-box; }替代无效的IE6 hack，彻底重置所有元素的默认边距
• 给ul添加padding-left: 0，清除浏览器默认的左侧内边距，解决留白问题
• 把background-size:100% 100%;改成background-size: cover; background-position: center center;，让背景图自适应容器且保持比例

这样修改后，你的轮播背景图应该就能完美适配全屏，左侧的留白也会消失啦！

内容的提问来源于stack exchange，提问作者Hogn Doe