html部分的代码是什么呢使用document.querySelectorAll("li"),获取所有的 <li> 元素,使用for循环语句, 在循环中设置图片的背景位置。
时间: 2024-02-18 17:00:33 浏览: 56
html5背景图片自适应代码
5星 · 资源好评率100%
好的,以下是示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>示例页面</title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
width: 100px;
height: 100px;
background-image: url('image.png');
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 20px;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var lis = document.querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
var li = lis[i];
li.style.backgroundPosition = "-" + (i * 100) + "px 0";
}
</script>
</body>
</html>
```
这个示例页面中包含一个 ul 列表,其中包含 5 个 li 元素。通过使用 `document.querySelectorAll("li")` 获取所有的 li 元素,然后使用 for 循环语句,从左到右设置每个 li 元素的背景位置。在这个例子中,我们使用了图片作为背景,然后使用 `background-position` 属性设置背景图片的位置。`background-position` 属性的值由两个部分组成,第一个部分表示水平位置,第二个部分表示垂直位置。在这个例子中,我们只设置了水平位置,垂直位置为 0。这里我们将每个 li 元素的背景图片向左移动了 0px, -100px, -200px, -300px, -400px,从而实现了每个 li 元素的背景图片位置不同。
阅读全文