Question

我有以下标记

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

我已经将固定背景应用于适用于班长的身体元素和白色背景

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);
}

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

Answer 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书籍。

Answer 2

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

也就是说，如果你试图创建一个洞的效果，那么你需要做的是创建一个白色的背景图像，并在其中切出一个透明的圆圈，并使其成为{{1}的背景}。如果.holder完全不透明，那么.circle的透明度无关紧要！

Answer 3

可能是你应该通过添加opacity：value属性或通过设置它的background-color来尝试：rgba（0,0,0，value）

值必须介于0到1之间。

Answer 4

我将只做5个div，其中1个在父母中间。父母是透明的，你的圈子也是。在所有4面都用:: before和:: after元素包围，这些元素不是透明的以加紧接缝……希望能有所帮助。

将div变为透明以透过两个容器

4 个答案: