css 是否可以在半透明的背景上制作一个透明的正方形？[duplicate]

2ic8powd 于 2023-03-05 发布在其他

关注(0)|答案(4)|浏览(154)

- 此问题在此处已有答案**：

Transparent hollow or cut out shape in HTML（7个答案）
11个月前关闭。
我的目标是实现类似于

的东西。

此示例图像使用了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>

我希望能够得到这种效果，同时使用一个元素的背景和一个元素，使"窗口"，以便例如添加圆角和类似的造型可以做得更容易。
我试过使用混合模式，但我不确定它是否不支持，或者我只是设置错了。

css

来源：https://stackoverflow.com/questions/71824213/is-it-possible-to-make-a-transparent-square-on-a-semi-transparent-background

4条答案

按热度按时间

nzrxty8p1#

一个很好的技巧，以获得相同的效果，是使用一个方框阴影的覆盖：

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

在这种情况下，100vmax充满了整个页面。

赞(0）回复(0）举报 2023-03-05

rt4zxlrg2#

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

赞(0）回复(0）举报 2023-03-05

kqlmhetl3#

如果你改变了透明框的透明度并将颜色设置为白色，你将得到你在链接示例中显示的半透明效果。

//下面链接的透明框的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);
    }

赞(0）回复(0）举报 2023-03-05

s4chpxco4#

一切都很好，除了颜色。我只是换了背景，就这样。
希望这是你想要的

.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）回复(0）举报 2023-03-05

我来回答

css 是否可以在半透明的背景上制作一个透明的正方形？[duplicate]

4条答案

相关问题

热门标签

最新问答