Opacity CSS and divs

  • Lewis

    (@lewisdavis88)


    14 years, 4 months ago

    Hey people,

    Ive created my own theme and wanted to make the body of the website translucent, so I used this CSS which worked:

    div#container {
	width: 950px;
	margin: auto;
	padding: 0px;
	clear: both;
	display: block;
	filter:alpha(opacity=70);
	opacity:0.7;
	background:white;
}

    The problem is that I also have a slider for some images within this container which is now translucent as well, however I need it to be normal. Ive tried everything I can think of to try and stop the slider inheriting the transparancy CSS. The code for the slider is inside a div and the CSS is:

    #container .homeslideredit{
	background:black !important;
	filter:alpha(opacity=100)!important;
	opacity:1!important;

}

    still making no difference.

    Any help would be awesome!!!! Thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • mrwweb

    (@mrwweb)

    14 years, 4 months ago

    Hi Lewis.Davi88.

    Setting opacity for an element effects all its children (as you discovered) and there’s no way around it. I remember losing an hour or two doing the same thing.

    What you want is either rgba or hsla. I like rgba just cause it’s a little easier to get the numbers for.

    Here are references:
    http://css-tricks.com/2151-rgba-browser-support/
    http://css-tricks.com/6565-yay-for-hsla/

    You’ll want to define a “fallback” color for whatever browsers don’t support rgba.

    div#container {
     background: #FFF;
     background: rgba(255,255,255,0.7);
}
    Thread Starter Lewis

    (@lewisdavis88)

    14 years, 4 months ago

    Hi mrwweb,

    Thank you for your help, thats really useful and very much appreciated.

    I will save this for next time as well!

    Cheers

    Lewis

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Opacity CSS and divs’ is closed to new replies.