CSS：如何设置div背景图像看起来就像适合整个页面

Question

我想制作一个 div

welcome

与正文具有相同的背景图像，但在 div 周围有

inverted(1)

。就像将 div 的背景图像拉伸到整个页面，同时仅在所述 div 的尺寸周围显示背景。

期望：期望的div背景

我在 div 中尝试了

background-size: cover

，希望它覆盖整个页面，但它却覆盖了整个 div。

div 代码：

.welcome {
    background-image: url("bg.jpg");
    filter: invert(1);
    background-size: cover;
}

body

与

welcome

div 具有相同的背景图像，具有以下属性：

background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-size: cover;
position: fixed;
margin: auto;

真实输出：用我当前的代码输出

Answer 1

在元素上使用

backdrop-filter

，而不是复制背景图像或在其上使用

opacity

。

.box {
  background-color: rgb(0 255 0 / 10%);
  backdrop-filter: invert(100%);
}

body {
  background-image: url(https://images.pexels.com/photos/799964/pexels-photo-799964.jpeg?auto=compress&cs=tinysrgb&w=600);
  background-size: cover;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.container {
  background-size: cover;
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.box {
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
  font-weight: bold;
}

<div class="container">
  <div class="box">
    <p>My Text Here To be Reviewed</p>
  </div>
</div>