如何在 CSS 中创建窗口 div

Question

我正在尝试创建一个带有背景图像和带有“窗口”的白色矩形的着陆页。

我无法获得正确的CSS。在 figma 中，我使用“窗口”矩形作为白色矩形上的遮罩来显示页面背景，但是我不知道，相同的遮罩技术如何/是否在 html css 中起作用（我想它需要更 hacky ，比如将背景图像和窗口背景图像对齐，使其看起来像透明的？）。

我尝试了一些实现，但收效甚微。

现在看起来像：

这很接近，但是你会看到“窗口”中的图像是中心的，我希望它与页面背景对齐。

页面需要响应，图像应保持其纵横比。

.backgroundImage {
  background-image: url('../../public/alabama-hills.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* Create the white rectangle */

.whiteRectangle {
  position: absolute;
  border-radius: $border-radius;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  padding: 1rem;
  justify-content: space-between;
}


/* Create the nested rectangle acting as a mask */

.mask {
  position: relative;
  width: 50%;
  height: 100%;
  border-radius: $border-radius;
  overflow: hidden;
}


/* Position the pseudo-element to match the background image */

.mask::before {
  content: "";
  background-image: url('../../public/alabama-hills.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: absolute;
  top: 0%;
  right: 0%;
  width: 100%;
  height: 100%;
}

<div className={styles.backgroundImage}></div>
<div className={styles.whiteRectangle}>
  <div />
  <div className={styles.mask}></div>
</div>

Answer 1

一个圆角的盒子还有一些

box-shadow

可以做的：

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  background: url(https://picsum.photos/id/10/800/400) center/cover;
}

.box {
  height: 80vh;
  width: 40vw;
  margin: auto 10vw auto auto;
  border: 10px solid #fff;
  border-radius: 20px;
  /* two shadows, one equal to width and another ot the radius */
  box-shadow: -40vw 0 0 #fff,-20px 0 0 #fff;
}

<div class="box"></div>