我已经设法使用 html5、css3 和 Jquery 为图像创建轮播。不幸的是，我无法弄清楚让图像完全填满背景的简单任务。它们旋转但大小不同。改了这么多，弄得一头雾水，谁能帮帮我？
CSS
.wrapper {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
padding-top: 0px;
}
.slider {
overflow: hidden;
}
.slider li {
margin: 0 auto;
list-style: none;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
}
HTML
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Gallery</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="wrapper">
<ul class="slider">
<li><img src="after_front.jpg"/></li>
<li><img src="after_scenicView.jpg"/></li>
<li><img src="after_lib.jpg"/></li>
<li><img src="after_mac.jpg"/></li>
<li><img src="after_gym.jpg"/></li>
<li><img src="after_lounge.jpg"/></li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"> <\/script>')</script>
<script src="js/main.js"></script>
</body>
</html>
如有任何建议，我们将不胜感激!完全新手在这里。谢谢。
最佳答案
有两件事可能是问题所在。第一个可能是您的 li 没有填充 .slider 列表的区域。您可以将 height: 100% 和 width: 100% 添加到列表项中，看看是否可以解决问题。另一个问题可能是您的浏览器不支持 background-size: cover。如果是这种情况，您可以尝试使用专有的浏览器标签:
.slider li {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size:100% 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='image/path/name.png',sizingMethod='scale');
}
如果这不能解决问题，您可以随时将图像作为 DOM 元素放入 HTML 中。然后你可以只写你的 CSS 说“宽度:100%”，它们将始终填充父宽度。这确实会导致图像居中出现一些问题，但它会完成工作!
基于您的 HTML 更新
问题是属性 background-size: cover 仅在您使用 background-image: url(../path/to/file.jpg) 定义图像时才有效。由于图像是 DOM 元素，因此它们不被视为背景，而只是 block 级元素。您可以重写 CSS 来处理 HTML 图像，也可以将 HTML 更改为:
<ul class="slider">
<li style="background-image: url('after_front.jpg');"></li>
<li style="background-image: url('after_scenicView.jpg');"></li>
<li style="background-image: url('after_lib.jpg');"></li>
<li style="background-image: url('after_mac.jpg');"></li>
<li style="background-image: url('after_gym.jpg');"></li>
<li style="background-image: url('after_lounge.jpg');"></li>
</ul>
您的图像路径可能不正确，因此您应该检查以确保它们没有出现 404 错误。此外，由于它们不再是 DOM 元素，您必须在 CSS 中定义高度。
关于css - 我正在使用旋转木马来显示图像，但无法使用无序列表修复图像以覆盖背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23346058/