如何在CSS中创建一个窗口div？

Question

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

我无法正确配置CSS。在Figma中，我使用“窗口”矩形作为白色矩形的遮罩，以显示页面背景，但是我不知道这种相同的遮罩技术在html css中是否也能起作用（我想可能需要更多的技巧，比如对齐背景图像和窗口背景图像，让它看起来像是透明的？）。

我已经尝试了几种实现方式，但都没有多大成功。

现在它的样子是这样的：

这很接近，但是你会发现“窗口”中的图像是居中的，而我想让它与页面背景对齐。

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

.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>

- Aaron Parry

---

你能把它放到 CodePen 或类似的地方吗？ - Raphael Ben Hamo

我们不需要在CodePen上进行演示。我们需要HTML（而不是JSX）。请更新上面的演示，以便它显示问题。 - isherwood

请查看 https://stackoverflow.com/help/minimal-reproducible-example - A Haworth

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 #fff,-20px 0 #fff;
}

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

或者使用一些伪元素，如果你想更好地控制窗口的宽度

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

.box {
  height: 80vh;
  width: 80vw;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 40%; /* adjust the 40% */
}
.box:before,
.box:after{
  content:"";
  border: 10px solid #fff;
  border-radius: 20px;
}
.box:before {
  background: #fff;
}
.box:after {
  box-shadow: -40px 0 #fff;
}

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

- Temani Afif

---

非常棒！ - Adam

哦，那真聪明。 - somethinghere

Answer 2

我创建了这个 CodePen 来解决问题：https://codepen.io/JW-Based/pen/bGmojNo。

<div class="backer">

<div class="hero">
    <div class="hero_left"></div>
    <div class="hero_right">
        <div class="hero_right_window"></div>
    </div>

</div>

所以你有一个包装器'backer'，它应用了背景图像。类名为'hero'的div将是父div，将容纳不透明的'hero_left'和透明的'hero_right' divs。'hero'本身将应用透明背景，而'hero_left'将分配背景颜色'white'。'hero_right'将在其中包含子元素'hero_right_window'。这样构造是为了使边框半径在父元素和子元素之间平衡。

.hero_left {
background: white;
height: 100%;
flex-basis: 50%;
border-radius: 10px 0px 0px 10px;
border: 5px solid white;}

.hero_right {
height: 100%;
flex-basis: 50%;
border: 5px solid white;
border-radius: 0px 10px 10px 0px;}

您可以看到我们在此处设置了相反的边框半径

.hero_right_window {
height:100%;
outline: solid white;
border-radius: 8px 0px 0px 8px;}

在这里，我们设置了一个轮廓，以不对子div“hero_right_window”增加更多的高度，并相应地设置了辐射。您可能需要调整轮廓厚度，以避免轮廓和父div之间出现明显的“死区”。

无论如何，在这里添加了少量的CSS以实现您想要的效果。如果您需要更新，请让我知道。

- FalsePozitive

Answer 3

我认为使用flex会更好，因为您可以在一侧放置内容，在另一侧放置照片，如果您想使用媒体查询，也很容易使用flex。您也可以尝试使用网格。

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  background: url(https://www.goodfreephotos.com/cache/united-states/california/other/alabama-hills-landscape-in-california_800.jpg?cached=1522511648) center/cover;
}

.box {
  margin: auto;
  width: 80%;
  height: 80%;
  display: flex;
  border-radius: 10px;
  border: thick solid #fff;
}

.box .content {
  background-color: white;
  width: 50%;
  height: 100%;
}

.content-t {
  border-radius: 10px;
  margin:-2px;
  width: 50%;
  height: auto;
  border: thick solid #fff;
}

<div class="box">
  <div class="content">
  </div>
  <div class="content-t">
  </div>
</div>

- Puneet Sharma