Apply opacity to an element in CSS

Question

I have a div element named signup-box and I want to have an opacity value of 0.65 applied to it, But there appears to be a side affect to doing so. For some reason it is getting applied to everything within that div as well. For instance, my white text wont show up white and also the inputs aren't white. What can I do to keep the transparent effect without losing the design aspects I want to keep? http://jsfiddle.net/HKy3F/5/

http://stackoverflow.com/questions/3350579/css-element-opacity-that-does-not-affect-transparency-of-its-contents , http://stackoverflow.com/questions/4182304/how-to-not-apply-opacity-for-child-element — c69, Mar 11 '12 at 02:14

score 1 · Answer 1 · answered Mar 11 '12 at 02:08

This is the behavior of the opacity property (it applies to everything in that element). If you only want to apply the opacity to the background only, then you'll need to either create an image with a 65% transparent black box, or you can use the CSS3 colors RGBA function to generate the color black at 65% opacity (doesn't work with IE < 9).

background: rgba(0, 0, 0, 0.6);

Which produces this jdFiddle. Hope that's what you were looking for.

score 1 · Answer 2 · answered Mar 11 '12 at 02:13

check this out , that should answer you question , use background rgba instead of opacity on your box.

http://jsfiddle.net/camus/Xb5TU/

#signup-box {
    height: 330px;
    width: 350px;
    background-color: rgba(0,0,0,0.65);

    border-radius: 8px;
}

score 0 · Answer 3 · answered Mar 11 '12 at 09:51

0

An easy way would be to create a small png file with the transparency you need and set it as background of the parent element. This will be good for all browsers :)

answered Mar 11 '12 at 09:51

MayThrow

2,159
4
24
38

score -1 · Answer 4 · answered Mar 11 '12 at 04:42

Have you tried using 2 divs - one for the background and one for the content?

In my example, I have a the background color #ffffff at 65% opacity.

Here is the CSS:


    body { background:#000000 ;
    margin:auto ;
    padding:15px ;
    }

    #divA { background:#ffffff ; /* this is your background */
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";

    /* IE 5-7 */
    filter: alpha(opacity=65);

    /* Netscape */
    -moz-opacity: 0.65;

    /* Safari 1.x */
    -khtml-opacity: 0.65;

    /* Good browsers */
    opacity: 0.65; 

    display:block ;
    width:300px ;
    height:300px ;
    margin:auto ;
    z-index:1 ;
    }

    #divB { display:block ; /* this is where your content goes */
    padding:20px ;
    width:250px ;
    height:260px ;
    text-align:center ;
    color:#C00 ;
    font-family:Arial, Helvetica, sans-serif ;
    font-size:24px ;
    text-align:center ;
    margin:auto ;
    z-index:5000 ;
    }

and here is the HTML that implements it:


    ‹div id="divA"›
    ‹div id="divB"›text goes here‹/div›
    ‹/div›

It works in IE7, IE8, IE9, FF, Opera, Safari, and Chrome

Good luck!

Cynthia

Apply opacity to an element in CSS

4 Answers4