turning a div into transparent to see through two containers

问题

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.

回答1:

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.

回答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!

回答3:

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.

来源：https://stackoverflow.com/questions/16987203/turning-a-div-into-transparent-to-see-through-two-containers

标签

html

css

background

alpha-transparency