是否可以在半透明背景上制作透明正方形？

Question

我的目标是实现类似于的目标。
此示例图像使用 4 个半透明的黑色方块，分别位于右、左、上和下，以模拟我想要的效果

使用看起来有点像这样的代码：

.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
}

.overlay {
  position: absolute;
  background-color: #0005;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.transparent-box {
  background-color: #fff0;
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 80px;
}

<!DOCTYPE html>
<html>
    <body>
      <div class="wrapper">
        <img src="https://picsum.photos/400/200" alt="">
        <div class="overlay">
          <div class="transparent-box"></div>
        </div>
      </div>
    </body>
</html>

我希望能够在使用一个元素作为背景和一个元素制作“window”的同时获得这种效果，这样例如添加圆角和类似的样式可以更容易地完成。
我试过混合模式，但我不确定它是否不支持混合模式，或者我只是设置错误。

Answer 1

一切都很好，除了颜色。我只是更改了背景，仅此而已。

希望这就是你想要的

.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
}
.overlay {
  background-color: #0000003b;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.transparent-box {
  background-color: #ffffff78;
  position: absolute;
  top: 4rem;
  left: 50px;
  width: 100px;
  height: 80px;
}

<div class="wrapper">
  <img src="https://picsum.photos/400/200" alt="">
  <div class="overlay">
    <div class="transparent-box"></div>
  </div>
</div>

Answer 2

获得相同效果的一个好技巧是在叠加层上使用 box-shadow：

.overlay {
    box-shadow: 0px 0px 1px 100vmax rgba(0,0,0,0.5);
}

在这种情况下，100vmax 会填满整个页面。

Answer 3

如果您更改 transparent-box (div) 的不透明度并设置颜色为白色，你会得到你展示的半透明效果在你的例子中 link.

//css of transparent-box link 编辑如下

        .transparent-box {
          background-color: white;
          opacity: 0.6;
          position: left;
          top: 50px;
          left: 50px;
          width: 100px;
          height: 80px;
        }

如果你想要在正常图片周围和中间有阴影，你需要使用阴影框：

    .transparent-box {
        opacity: 0.9;
        position: absolute;
        top: 50px;
        left: 50px;
        width: 100px;
        height: 80px;
        box-shadow: 0 0 0 100pc rgba(0, 0, 0, .8);
    }

Answer 4

您可以使用两张背景固定的图像属性来创建类似的效果。检查这个 fiddle link jsfiddle

  $(".transparent-box").draggable();

.overlay {
  height: 300px;
  width: 300px;
  background-image: linear-gradient(0deg, #464646fc, #383333ab), url('https://via.placeholder.com/300/0000FF/808080%20?Text=Digital.com');
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
}

.transparent-box {
  height: 30%;
  width: 30%;
  background-image: url('https://via.placeholder.com/300/0000FF/808080%20?Text=Digital.com');
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: absolute;
}

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<body>
    <div class="overlay">
      <div class="transparent-box"></div>
    </div>
</body>

</html>

是否可以在半透明背景上制作透明正方形？

Is it possible to make a transparent square on a semi-transparent background?

html

css

transparency