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

Question

我的目标是实现类似于 sunset highlighted 的东西。
这个示例图像使用了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>

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

Answer 1

获得相同效果的一个好技巧是在叠加层上使用框阴影：

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

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

Answer 2

您可以使用两个具有固定背景属性的图像来创建类似的效果。检查这个小提琴链接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>

Answer 3

如果您更改透明框 (div) 的不透明度并设置颜色为白色，你会得到你展示的半透明效果在您的示例链接中。

//下面链接的透明框的CSS

        .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

一切都很好，除了颜色。我只是改变了背景，就是这样。

我希望这就是你想要的

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

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

问题描述投票：0回答：4

4个回答

最新问题

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

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4