Is it possible to have an opacified background layer which doesn't opacify its children?_问答_开发者

Is it possible to have an opacified background layer which doesn't opacify its children?

开发者 https://www.devze.com 2022-12-09 00:37 出处：网络

Let say I\'ve this code : <!DOCTYPE html PUBLIC \'-//W3C//DTD XHTML 1.0 Strict//EN\' \'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\'>

Let say I've this code :

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title&g开发者_JAVA百科t;Layers Opacity</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta name="robots" content="index,follow" />
        <style type="text/css">
            div#container
            {
                background-color: black;
                width: 200px;
                height: 400px;
                padding-top: 50px;
                            opacity: 0.5;
            }

            ul#menu
            {
                background-color: red;
                width: 150px;
                margin: 0 auto;
                            opacity: 1;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <ul id="menu">
                <li><a href="#"></a>Menu 1</li>
                <li><a href="#"></a>Menu 2</li>
                <li><a href="#"></a>Menu 3</li>
                <li><a href="#"></a>Menu 4</li>
                <li><a href="#"></a>Menu 5</li>
            </ul>
        </div>
    </body>
</html>

I'd like to have my "#menu" in full color, red. I tried to remove the inheritance by setting opacity to 1, but it doesn't work. Did i make something wrong ? Or Is it simply not possible by this way ?

I could probably do a layer, outside my menu, and position it in background with z-index, but I'm looking a way in pure css, without to modify my xhtml.

Thanks

Since you are only trying to change the background of the element, you can use an rgba colour (CSS 3) in supporting browsers. Most browsers which don't support it can handle a translucent PNG.

See (blatant self-promotion) CSS 3: RGBA today for a fuller explanation and some sample code.

Nope. Putting the menu outside the container would be the normal fix; if you can't change the markup another approach is to avoid opacity entirely and use a semi-transparent PNG as the container background instead (with suitable AlphaImageLoader fix for IE6 if necessary).

From the specification:

If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is .

Since your menu is contents of the container, it will also have the containers opacity applied. Your only option is to apply a workaround such that your menu is not technically contained within the div. This article also describes such an approach.

I would use a transparent png as a background image for modern browsers and a filter in IE6, as described in this article: Cross Browser Background Transparency With CSS