Home/ Questions/Q 405123
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T17:22:16+00:00

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’>

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0