Question

我希望我的css图像覆盖整个屏幕，我随机选择JS数组中的图像。它显示图像，但没有显示完美的整页背景图像。

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% */
  }
}

Answer 1

我同意设置document.body.style['background-image']属性是最好的方法，特别是因为它允许您处理与屏幕形状不匹配的图像形状（使用background-position和{{1修复}}）。如果您仍想使用background-size，则可以使用CSS3长度单位<img>，vh。可以找到对现代浏览器的支持here。

vw

请注意，即使img.bg { width: 100vw; height: 100vh; }元素（即有滚动条），图像也不会高于视口，

Answer 2

那是什么类型的CSS？我不建议使用vw / vh。

您最好使用标准背景尺寸和位置，例如

/*background-image: url(../images/background.png);*/ optional
background-size: cover;
background-repeat: no-repeat;
background-position: left top;

你可以随时添加

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

用于完全跨浏览器兼容性

CSS图像不覆盖整个屏幕

2 个答案: