我想我的CSS图像覆盖整个屏幕,我从JS数组中随机选择一个图像。它显示图像,但没有显示完美的完整页面背景图像。CSS图像不覆盖整个屏幕
main.html中
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<button id = "button1">Click</button>
<script src = "main.js"></script>
</body>
</html>
main.js
document.getElementById("button1").addEventListener("click", function(){
showImage();
});
...
function showImage(){
document.write('<img class = "bg" src="'+theImages[whichImage]+'">');
}
的main.css
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
你确定你想添加''作为一个元素?如果你只是想要一个背景图片,为什么不使用css'[background-image](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image)'属性,或许在'
'?然后你可以设置'background-size:cover;'或'background-size:contains;'或'background-size:100%;'来获得你想要的。 – neilsimp1@neilsimp我不认为这会对我有用,因为我从背景图像阵列中随机选择图像。 – Han
'document.body.style ['background-image'] ='url(''+ theImages [whichImage] +'“)';'会设置该属性。 – neilsimp1