www.webdeveloper.com
Results 1 to 12 of 12

Thread: transparency and opacity

  1. #1
    Join Date
    Aug 2007
    Location
    Washington
    Posts
    219

    transparency and opacity

    I am trying to accomplish something to this effect: http://depts.washington.edu/asuwxpcl/images/example.jpg

    My first thought would be to change the opacity on the div that contains the content, but that changes the opacity on everything therein also. I then thought to do something like this:

    PHP Code:
    #maincol{
        
    background-colorrgb(75,117,94);   
        
    margin-top10px;
        
    filteralpha(opacity=23);
        -
    moz-opacity:0.23;
    }
    #maincol2{
        
    background-colortransparent;
        
    filteralpha(opacity=100);
        -
    moz-opacity:1;

    Where maincol2 is nested in maincol. Also doesn't seem to work. So I was wondering, what would be the best way to set this up? Should I use something like this: http://www.twinhelix.com/css/iepngfix/demo/ or just set the background image in my div to look like an opaque part of the bicycle? Or are there better ways I can go about doing this?

    Much thanks!
    Last edited by bejitto101; 04-24-2008 at 12:56 PM.

  2. #2
    Join Date
    May 2007
    Location
    Cleveland, OH
    Posts
    1,403
    You could use a 1px by 1px transparent gif/png for the background image of thie div.

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,479
    Hi there bejitto101,

    have a look at this example, you should be able to adapt it to suit your requirements....
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <base href="http://mysite.orange.co.uk/azygous/images/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #box1 {
        position:relative;
        width:768px;
        height:512px;
        background-image:url(blood_ball.jpg);
        background-repeat:no-repeat;
        border:3px double #f00;
        margin:30px auto;
     }
    #box2 {
        position:absolute;
        width:525px;
        height:324px;
        top:182px;
        left:0;
        background-color:#fff;
        border:3px solid #000;
        opacity:0.5;
        filter:alpha(opacity=50);
     }
    #box3 {
        position:absolute;
        width:445px;
        height:284px;
        padding:20px 40px;
        top:182px;
        left:0;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:16px;
        color:#fff;    
     }
    #box3 h1 {
        background-color:#ccc;
        text-align:center;
        border:1px solid #000;
     }
    #box3 p {
        text-align:justify;
     }   
    </style>
    
    </head>
    <body>
    
    <div id="box1">
    
    <div id="box2"></div>
    
    <div id="box3">
    <h1>Lorem Ipsum</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p>
    </div>
    
    </div>
    
    </body>
    </html>
    
    coothead

  4. #4
    Join Date
    Aug 2007
    Location
    Washington
    Posts
    219
    So, coothead basically you did the same thing I was trying, but just didn't nest the divs? That's the only difference I can see. Is that it?

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,479
    Hi there bejitto101,

    nested elements will receive the opacity of the parent.
    To overcome this the elements need to be positioned absolutely within a relatively positioned container.

    coothead

  6. #6
    Join Date
    Aug 2007
    Location
    Washington
    Posts
    219
    coothead,
    But I always thought if you define a style on the nested element it will take precedent over the containing element. Is that not right?

  7. #7
    Join Date
    May 2007
    Location
    Cleveland, OH
    Posts
    1,403
    that is correct, unfortunately certain unnamed browsers don't implement it correctly.

  8. #8
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,479
    Hi there bejitto101,

    I have shown you how to accomplish your effect...
    ...so where is the problem.

    coothead

  9. #9
    Join Date
    Aug 2007
    Location
    Washington
    Posts
    219
    No real problem, I'm just curious about inherited css values. Which browsers don't implement it correctly?

  10. #10
    Join Date
    May 2007
    Location
    Cleveland, OH
    Posts
    1,403
    I think IE messes up on inherited transparency (if I remember correctly). I just use `background: transparent url(/images/1by1transparent.gif)` now to accomplish the effect, I like it better then manually aligning everything.

  11. #11
    Join Date
    Aug 2007
    Location
    Washington
    Posts
    219
    Well, I was using Firefox, so thats odd. Beta 5 too...Don't you love all the quirks you find?

  12. #12
    Join Date
    May 2007
    Location
    Cleveland, OH
    Posts
    1,403
    Finding quirks is every web developers favorite part of their job .

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles