CODEWITHSUNDEEP
cssopacity
TheGateKeeper
TheGateKeeper

Reputation: 4520

CSS3 Opacity inheritance

im trying to use Opacity to make a background semi-transparent, but any content i put in the div also takes on the semi-transparency. Anyone know how i can circle around this? Here is the code in question:

<div class="serviceContainer"> //The transparent div
    <div class="overflowAuto">
        <div class="left">
            <asp:Image ID="img" runat="server" />
        </div>
        <div runat="server" id="divTitle" class="title table centreWithMargins">
        </div>
    </div>
    <div runat="server" id="divText">
    </div>
</div>

And the css:

.serviceContainer {width:350px; display:table; opacity:0.2; filter:alpha(opacity=20); background-image:url('../Images/glass.jpg'); background-repeat:no-repeat; background-position:center;}
.serviceContainer img, p {opacity:1.0; filter:alpha(opacity=100);} //I tried to set the opacity of the contained elements, but it didnt work

Thanks

Upvotes: 1

Views: 1195

Answers (3)

chovy
chovy

Reputation: 75656

Don't use opacity to create transparency, use rgba(x, x, x, y) where y is the opacity level between 0 and 1:

example:

#something { background: rgba(0, 0, 0, .6); }

Upvotes: 2

Alexey Ivanov
Alexey Ivanov

Reputation: 8236

It depends on the image size of "../Images/glass.jpg" but the simplest and most cross-browser way probably would be to convert this image to semi-transparent png-image.

Another, not so clean and cross-browser way (not working in ie6 and ie7) would be to use :before pseudoclass.

Example code: http://jsfiddle.net/ZXDvc/

Upvotes: 2

Joshua
Joshua

Reputation: 3603

Opacity is inherited from the parent, so regardless of what you set for the children, they will always take on the opacity of the parent.

There are plenty of hacks and workarounds, but in general the simplest solution is to place the img / p in a separate container that is positioned (absolutely or otherwise) directly on top of the background container.

Upvotes: 1

Related Questions