javascript - 如何用纯色图像覆盖整个网页(在顶部)

标签 javascript css dom

我想用拉伸(stretch)的图像文件覆盖整个 body 区域(任意 body )。我试过使用背景,但即使使用 z-index 似乎也不行。

我已经在下面尝试过,但这只会将真实的网页向下推。

<!DOCTYPE html>
        <html>
          <head>
            <meta charset="utf-8" />
            <title></title>
            <style>
              .box {
                width: 100%;
                height: 100%;
                z-index: 999;
                background-size: 1%;
                background-repeat: repeat;
              }
            </style>
          </head>
          <body>
            <div>
              <img src="solid-white.png" class="box" />
              <div>ajldfskaf</div>
            </div>
          </body>
        </html>

最佳答案

使用这个 CSS(不需要额外的元素):

body { position: relative; }
body::before {
  content: "";
  background-image: url(path/to/your/solid-white.png);
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

关于javascript - 如何用纯色图像覆盖整个网页(在顶部),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56194298/

相关文章:

javascript - 在 React Navigation 中重用屏幕

javascript - Jquery添加类后如何应用css?

html - 处理 CSS float 的正确、标准方法是什么

jquery - 将鼠标悬停在同一位置的两个元素上

使用空格修改 css 名称时出现 Javascript InvalidCharacterError

javascript - 数组数组的 "column total"的模式

Javascript 井字游戏获胜者检查

javascript - 作出 promise 等待另一个 promise

javascript - 在 javascript 中,如何确定 dom 对象的类型,例如 HTMLLIElement 或 HTMLElement

javascript - 带截图的 CSS 跨浏览器测试