将 div 变为透明以查看两个容器答案

【问题标题】：turning a div into transparent to see through two containers将 div 变为透明以查看两个容器
【发布时间】：2019-12-02 08:31:58
【问题描述】：

我有以下标记

<body>
   <div class="holder">
      <div class="circle"></div>
   </div>
</body>

我已经为 body 元素应用了一个固定的背景，并为 class holder 应用了白色背景

body {
    background: url(image.png);
    background-attachment: fixed;
}

.holder {
    width: 500px;
    height: 500px;
    background: #fff;
}
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0);
}

我试图做的是让圆圈透明以查看身体背景。简单地说，我正在尝试的是，使圆圈透明以查看身体背景图像，而圆圈周围的白色背景仍然存在。请原谅我的英语。伙计们请帮助我。

【问题讨论】：

标签： html css background alpha-transparency

【解决方案1】：

您要求做的事情将无法使用透明度。

但是，有一种解决方法是完全可以接受的：

body {
    background: url(http://placekitten.com/g/400/500);
    background-attachment: fixed;
}
.holder {
    width: 500px;
    height: 700px;
    background: rgba(255,255,255,0.8);
    border: 1px dotted blue;
}
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: url(http://placekitten.com/g/400/500);
    background-attachment: fixed;
}

查看演示：http://jsfiddle.net/audetwebdesign/FqMXz/

只需将相同的背景图片应用到.circle div。

这个技巧取自 Eric Meyer 的一本 CSS 书籍。

【讨论】：

图片链接需要从/400/500更新到/g/400/500。新小提琴：jsfiddle.net/FqMXz/85。不过，救生提示，谢谢。
@steel 谢谢，我添加了修复程序！

【解决方案2】：

rgba() 中的第 4 个数字是 alpha 透明度。您已将其设置为 0，这是完全透明的。 1 将是完全不透明的。您需要将其设置为 0 到 1 之间的某个值。

也就是说，如果你想创建一个洞的效果，那么你需要做的是创建一个白色的背景图像，并在其中切割一个透明的圆圈，并将其作为.holder 的背景。如果.holder 完全不透明，那么.circle 的透明程度就无关紧要了！

【讨论】：

我需要使圆圈完全透明才能看到身体背景，而圆圈周围的白色背景仍然存在。但由于 .holder 类的背景，这是不可能的。（圆圈的容器类）。只是让圆圈透明是不行的。你能帮帮我吗？
@solom，是的，请重新阅读我的第二段。您必须使用透明图像来创建此效果，正如我所描述的那样，或者正如 Marc Audet 在他的回答中指定的那样。两种解决方案都有效，尽管他只适用于固定背景。但不幸的是，没有办法绕过需要图像。要么在.holder 的背景中创建一个洞，要么在.circle 中创建一个作为主体背景的固定副本的背景。
德里克的观点很好。我的回答是针对固定背景的。在之前的项目中，我使用类似于 Derek 的方法为照片库制作精美的圆形蒙版。了解这两种技术以及何时适当使用它们是很好的。
真的很抱歉。因为我现在学习 css 11 个小时，所以我没有立即理解答案。好累
@solom，不用担心。只需将其视为图层和反向贴花。如果你想看到下面的层，你必须在顶层和它下面的层上都切一个洞，或者你必须把底层的副本放在上面。

【解决方案3】：

也许你应该通过添加 opacity: value 属性或设置它的 background-color: rgba(0,0,0,value) 来尝试它

值必须介于 0 到 1 之间。

【讨论】：

【解决方案4】：

我即将制作 5 个 div，其中 1 个在中心，全部位于父级内部。父母是透明的，你的圈子也是如此。用 ::before 和 ::after 元素包围所有 4 个侧面，这些元素不透明以收紧接缝...希望有所帮助。

【讨论】：

如果这是对 OP 的有效答案，您能否提供一些代码示例来说明您的答案？