html – 将div变为透明以查看两个容器

我有以下标记

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

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

解决方法

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

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

body {
    background: url(http://placekitten.com/g/400/500);
    background-attachment: fixed;
}
.holder {
    width: 500px;
    height: 700px;
    background: rgba(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书籍.

html – 将div变为透明以查看两个容器

解决方法

相关文章