turning a div into transparent to see through two containers

Question

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.

Marc Audet · Accepted Answer · 2015-01-14T20:48:07.970

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

see demo at: http://jsfiddle.net/audetwebdesign/FqMXz/

Just apply the same background image to the .circle div.

This trick is taken from one of the CSS books by Eric Meyer.

The image links need to be updated from /400/500 to /g/400/500. New fiddle: http://jsfiddle.net/FqMXz/85/. Lifesaving tip though, thank you. — steel, Jan 14 '15 at 18:24

score 2 · Answer 2 · answered Jun 07 '13 at 15:07

2

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 .circle if .holder is completely opaque!

answered Jun 07 '13 at 15:07

Derek Henderson

9,388
4
42
71

i need to make the circle fully transparent to see the body background while the white background around the circle still exist. but it is not possible because of the background of the .holder class. (container class of the circle). just making circle transparent doesn't do it. could u help me please ? – It worked yesterday. Jun 07 '13 at 15:14
@solom, yes, re-read my second paragraph. You have to use a transparent image to create this effect, either as I described it or as Marc Audet specified in his answer. Either solution works, although his only works for fixed backgrounds. But unfortunately, there's no getting around needing an image. Either create a hole in `.holder`'s background or create a background in `.circle` that is a fixed copy of the body background. – Derek Henderson Jun 07 '13 at 15:21
Derek is making a good point. My answer is specific for a fixed background. In a previous project, I used an approach similar to Derek's to make a fancy, circular mask for a photo gallery. It is good to understand both techniques and when to use them appropriately. – Marc Audet Jun 07 '13 at 15:24
I am really sorry. I didnt understand the answer at once since i am learning css for 11 hours now. soo tired – It worked yesterday. Jun 07 '13 at 15:30
@solom, no worries. Just think of it as layers and reverse applique. If you want to see the layer beneath the layer beneath, you'll have to cut a hole in both the top layer and the layer under it, or you'll have to put a copy of the bottom layer on top. – Derek Henderson Jun 07 '13 at 15:34
@Sam, was there a particular reason you changed your answer? – Derek Henderson Jun 26 '13 at 08:47
@DerekHenderson hm.. after reading meta, help and stuff i realized that i have to accept the answer that more fits to my question. So revisited all of my questions and pick the answers fit to the questions. Your answer is applicable for any situationbut the answer i chossed has a ddemonstration with how to do and what i have asked is about fixed background. Also i am using it now. If I am wrong please, please, please correct me :) – It worked yesterday. Jun 26 '13 at 16:46
@Sam, no, you're not wrong. I was just a bit curious, as suddenly seeing a -15 in my rep was a bit of a shock. ;) – Derek Henderson Jun 27 '13 at 09:38

score 0 · Answer 3 · answered Jun 07 '13 at 15:13

0

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.

answered Jun 07 '13 at 15:13

Roshan

645
1
11
36

score 0 · Answer 4 · answered Dec 02 '19 at 00:31

0

I'm about to just make 5 divs with 1 in the center all inside of a parent. Parent is transparent and your circle would be too. Surrounded on all 4 sides with ::before & ::after elements that aren't transparent to tighten up the seams... hope that helps.

answered Dec 02 '19 at 00:31

WideSpread

1

If this is a valid answer to OP, Can you provide some code example to illustrate your answer ? – Crocsx Dec 02 '19 at 01:25

turning a div into transparent to see through two containers

4 Answers4

Linked

Related