Я хотел бы, чтобы мое изображение 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: содержать;» или «background-size: 100%;», чтобы получить то, что вы хотите. – neilsimp1@neilsimp Я не думаю, что это сработало бы для меня, потому что я случайно выбираю изображение из массива изображений для фона. – Han
'document.body.style ['background-image'] = 'url ("' + theImages [whichImage] + '")';' будет устанавливать это свойство. – neilsimp1