opacity

The opacity CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid.

Example

<html>
    <head>
        <style>
            div.background {
                width: 500px;
                height: 250px;
                background: url(klematis.jpg) repeat;
                border: 2px solid black;
            }
            
            div.transbox {
                width: 400px;
                height: 180px;
                margin: 30px 50px;
                background-color: #ffffff;
                border: 1px solid black;
                opacity: 0.6;
                filter: alpha( opacity = 60); /* For IE8 and earlier */
            }
            
            div.transbox p {
                margin: 30px 40px;
                font-weight: bold;
                color: #000000;
            }
        </style>
    </head>
    <body>
        <div class="background">
            <div class="transbox">
                <p>
                This is some text that is placed in the transparent box.
                This is some text that is placed in the transparent box.
                This is some text that is placed in the transparent box.
                This is some text that is placed in the transparent box.
                This is some text that is placed in the transparent box.
                </p>
            </div>
        </div>
    </body>
</html>

One thought on “opacity

Comments are closed.