5

我有以下标记

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

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

4

4 回答 4

9

您要求做的事情不会使用透明度。

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

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/

只需将相同的背景图像应用于.circlediv。

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

于 2013-06-07T15:12:34.010 回答
2

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

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

于 2013-06-07T15:07:35.660 回答
0

可能您应该通过添加 opacity: value 属性或设置其背景颜色来尝试它： rgba(0,0,0,value)

值必须介于 0 到 1 之间。

于 2013-06-07T15:13:26.047 回答
0

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

于 2019-12-02T00:31:58.073 回答