将 div 变为透明以查看两个容器 [英] turning a div into transparent to see through two containers
问题描述
我有以下标记
<body>
<div class="holder">
<div class="circle"></div>
</div>
</body>
我已经为 body 元素应用了一个固定的背景，为 class holder 应用了白色背景
and i have applied a fixed background to body element and white background applied to 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);
}
我试图做的是让圆圈透明以查看身体背景.简单地说，我正在尝试的是，使圆圈透明以查看身体背景图像，而圆圈周围的白色背景仍然存在.请原谅我的英语.伙计们请帮助我.
what i have tried to do is to make the circle transparent to see the body background. Simply, what i am trying is, making the circle transparent to see the body background image while the white background around the circle still exist. please excuse my English. Guys please help me.
推荐答案
你要求做的事情不会使用透明度.
What you are asking to do will not work using transparency.
但是，有一种解决方法是完全可以接受的:
However, there is a work around that is quite acceptable:
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.
Just apply the same background image to the .circle div.
这个技巧取自 Eric Meyer 的一本 CSS 书籍.
This trick is taken from one of the CSS books by Eric Meyer.
这篇关于将 div 变为透明以查看两个容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
