{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 仙女界的扛把子 的问题《turning a div into transparent to see through two》','https://www.manongdao.com/q-232133.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have following markup
<body>
<div class="holder">
<div class="circle"></div>
</div>
</body>
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.
The 4th number in
rgba()is the alpha transparency. You've set it to 0, which is completely transparent. 1 would be completely opaque. You need to set that to some value between 0 and 1.That said, if you are trying to create the effect of a hole, then what you need to do is create a background image that is white and has a transparent circle cut in it and make that the background to
.holder. It doesn't matter how transparent you make.circleif.holderis completely opaque!may be you should try it by adding opacity: value attribute or by setting its background-color: rgba(0,0,0,value)
Value must be between 0 to 1.
What you are asking to do will not work using transparency.
However, there is a work around that is quite acceptable:
see demo at: http://jsfiddle.net/audetwebdesign/FqMXz/
Just apply the same background image to the
.circlediv.This trick is taken from one of the CSS books by Eric Meyer.