Grow your CSS skills. Land your dream job.

Image Opacity

  • # October 5, 2009 at 10:23 pm

    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?

    # October 5, 2009 at 10:50 pm

    try adding:

    .box img {
    opacity: 1;
    }

    # October 6, 2009 at 3:15 pm

    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.

    # October 6, 2009 at 3:38 pm

    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.

    # October 6, 2009 at 9:23 pm
    "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!

    # October 7, 2009 at 12:29 pm

    It’s just a value you would use as an alternative to the color #

    RGB is self explanatory, just set the properties on the values you see in any graphics program

    [attachment=0]img1.jpg[/attachment]

    And the "a" is the alpha, 1 being fully opaque.

    So in action it might look like:

    #box {
    background : rgba(255, 255, 255, .9);
    }

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".