以下代码为什么没有显示出图片<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div1 { width: 100%; height: 960px; background-color:rgba(52, 174, 255, 0.208); } .bc1 { background-image: url(img/cloud.jpg); background-size: 100px; /* 图片大小 */ background-repeat: no-repeat; } </style> </head> <body> <div id="div1" class="bc1"></div> <script> function getRandom(min,max) { this.range = Math.floor(Math.random() * (max - min) + min); } var w = new getRandom(100,800); var h = new getRandom(50,700); var bc1 = document.getElementsByClassName('bc1'); bc1.style.backgroundPosition = w.range + 'px ' + ' ' + h.range + 'px'; </script> </body> </html>
时间: 2024-02-16 16:20:13 浏览: 77
在你提供的代码中,问题出在以下这行代码:
```javascript
var bc1 = document.getElementsByClassName('bc1');
bc1.style.backgroundPosition = w.range + 'px ' + ' ' + h.range + 'px';
```
`document.getElementsByClassName` 返回的是一个 HTMLCollection 对象,而不是单个元素。因此,你需要通过索引来访问该集合中的元素,然后再设置其样式。
修改你的代码如下:
```javascript
var bc1 = document.getElementsByClassName('bc1')[0]; // 通过索引获取第一个匹配的元素
bc1.style.backgroundPosition = w.range + 'px ' + h.range + 'px';
```
这样,你就能正确地设置 `bc1` 元素的 `backgroundPosition` 样式属性了。
另外,根据你提供的代码,你将图片作为背景图片设置在 `<div>` 元素上,但是你没有指定背景图片的大小。你可以通过设置 `background-size` 样式属性来指定背景图片的大小,例如:
```css
.bc1 {
background-image: url(img/cloud.jpg);
background-size: 100px; /* 设置背景图片大小 */
background-repeat: no-repeat;
}
```
这样,背景图片就会按照指定的大小显示在 `<div>` 元素上了。
阅读全文