Image Opacity

[david.coxsey]

So, I’ve got a div that has an opacity set.

Code:

.box {
margin: 0 auto;
width: 900px;
min-height: 300px;
height: auto;

padding: 10px;
background: white;
opacity: .75;
filter: alpha(opacity = 75);

}

So, now I’ve added a standard image to this div, but in Firefox the image has the same opacity as the div. In IE, the image looks right. What am I doing wrong?

[TheDoc]

try adding:

.box img {
opacity: 1;
}

[david.coxsey]

So, I’ll try that when I get home tonight, but something else quirky has come up. At home I’m running Firefox and IE8, but when I got to work this morning and used IE 7, none of my content showed up. Here is the site: http://www.allaboutsmilesonline.com. This is the css (little messy right now, but I promise to clean it up as soon as I finish development):

Code:

@charset “utf-8”;

/* All About Smiles CSS

Created by David Coxsey

Design by Alissa Ammons Coxsey

September 10, 2009

*/

*

{

margin: 0px;

padding: 0px;

}

body {

font-family:Arial, Helvetica, sans-serif;

color:black;

font-size:10px;

}

/* background image stuff */

html, body, #bg, #bg table, #bg td

{

height:100%;

width:100%;

overflow:hidden;

}

#bg div {

height:200%;

left:-50%;

position:absolute;

top:-50%;

width:200%;

}

#bg td {

text-align:center;

vertical-align:middle;

}

#bg img {

margin:0 auto;

min-height:50%;

min-width:50%;

}

/* content area */

#cont {

position:absolute;

top:200px;left:200px;

z-index:80;

overflow:auto;

}

.box {

margin: 0 auto;

width: 900px;

min-height: 300px;

height: auto;

padding: 10px;

background: white;

opacity: .75;

filter: alpha(opacity = 75);

}

.box p

{

text-indent : 10px;

}

.box p.cap

{

text-align:center;

font-style: italic;

font-size: 9px;

text-indent: 0;

}

.box .right-side

{

position:relative ;

float:right;

width: 450px;

top: 5px;

padding: 10px;

font-size: 15px;

}

.box .left-side

{

position :relative ;

float : left;

width: 400px;

padding: 10px;

}

.box .left-side .cover

{

display: block;

margin-left: auto;

margin-right: auto;

}

.box div.pinto

{

clear:both;

float: right;

font-size: small;

font-style: italic;

}

.box div.pinto a

{

text-decoration: none;

color: Black;

}

.box div.pinto a:hover, .box div.pinto a:visted

{

color: black;

}

/*menu*/

#menu {

top: 84px; left: 0px;

height: 60px;

width: 100%;

z-index: 70;

position:absolute;

background-color: #ffffff;

opacity: .75;

filter: alpha(opacity = 75);

}

#menu p{

padding-left: 10px;

}

#menu .pinto {

font-size: 10px;

left: 500px; top: 0px;

position:relative;

}

#menu .pinto a, #menu .pinto a:hover, #menu .pinto a:visited {

text-decoration: none;

color:black;

}

#logo {

top: 11px;

float: right;

position: relative;

background: url(images/logo.png) no-repeat;

height: 175px; width: 545px;

z-index: 80;

}

Is there something for IE 7 that I’m missing. BTW, I used Chris’ tutorial on full page background images to build this site.

[Chris Coyier]

Any child elements of an element with opacity cannot be any less transparent than the parent. That soulds like jibberish I guess… But you can’t reset that image inside it to be full opacity while it’s parent is 75% opacity, not gonna work. But that opacity you only need because you want some faint white box right? Just use RGBa instead for the background color.

[david.coxsey]

"chriscoyier" wrote:

Any child elements of an element with opacity cannot be any less transparent than the parent. That soulds like jibberish I guess… But you can’t reset that image inside it to be full opacity while it’s parent is 75% opacity, not gonna work. But that opacity you only need because you want some faint white box right? Just use RGBa instead for the background color.

Chris, I’m a bit of a newbie when it comes to CSS (learned most of the stuff from this site, though), so you’re going to have to explain RGBa for me just a bit.

Thanks in advance!

[Author]

Posts