主要思路：先用一个div标签填充整个页面然后放上一张图片，然后创建一个子元素给上子绝父相的定位，伪元素一定要有content属性，然后利用top：0和left：0使得伪元素的起始坐标是父元素的左上角，再用witdh：100%；height：100%填充满父元素的整个区域，然后就可以给伪元素加背景色形成遮罩了

<body>
  <div class="container"></div>
</body>

  <style>
    .container{
      position: relative;
      width: 100vw;
      height: 100vh;
      background-image: url("../public/images/1.png");
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      overflow: hidden;
    }
    .container::before{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* background-color: rgba(255, 255, 255, 0.3); */
      background-color: rgba(0, 0, 0, 0.3);
    }
  </style>

</head>

51sdg185a4s

Q.E.D.

一个二次元web开发咸鱼