1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Image OPACITY

Discussion in 'Web Design' started by proph37, Aug 21, 2012.

  1. proph37

    proph37 Newbie

    Joined:
    Apr 5, 2012
    Messages:
    40
    Likes Received:
    10
    I have appended opacity of 85% to contentbox - that is a wrapper that contains articles, pictures... inside of it. My problem is I don't want the images inside it to have opacity of 85% i want them to be 100%, so i append a class to them which contains code for 100% but nothing has changed!
     
  2. dubious

    dubious Regular Member

    Joined:
    Apr 22, 2012
    Messages:
    235
    Likes Received:
    222
    Occupation:
    Project Manager/Business Development Manager
    Location:
    Australia
    a) when in doubt, use !important
    b) it's called cascading style sheets for a reason, ensure that the #wrapper #child {... } comes AFTER #wrapper on the CSS because the last styles take precedence
    c) without a direct code snipet and or dummy link to page, it's difficult to help beyond the above two points
     
  3. proph37

    proph37 Newbie

    Joined:
    Apr 5, 2012
    Messages:
    40
    Likes Received:
    10
    Tried all of that, but nothing just works. Here, this is the code
    Code:
    .contentBox{
    margin-top:110px;
    width:670px;
    height:auto;
    background-color:#160306;
    padding-bottom:20px;
    opacity:0.85;
    filter:alpha(opacity=85);
    }
    
    
    .contentBox .innerBox
    {
    margin-left:10px;
    position:relative;
    width:650px;
    height:auto;
    top:10px;
    background-image:url(contentBack.png);
    background-color:#FFFFFF;
    background-repeat:repeat-x;
    opacity:0.85;
    filter:alpha(opacity=85);
    }
    
    
    .contentBox .innerBox img
    {
    opacity:1.0;
    filter:alpha(opacity=100);
    }
    
     
  4. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,468
    Likes Received:
    10,147
    Don't use opacity in the parent container because it does not work like you think. The only way to make this work is to use rgba() for background-color. The fourth parameter is the opacity. Example: rgba(255,255,255,0.5);
     
  5. proph37

    proph37 Newbie

    Joined:
    Apr 5, 2012
    Messages:
    40
    Likes Received:
    10
    Well thats CSS3 and I don't want that... I guess the only thing left to me is border + opacity set in photoshop?
     
    Last edited: Aug 21, 2012
  6. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,468
    Likes Received:
    10,147
  7. proph37

    proph37 Newbie

    Joined:
    Apr 5, 2012
    Messages:
    40
    Likes Received:
    10
    Well i worked so hard not to implement CSS3 and to fully support older browsers, seems like im cut off huh :/
     
  8. dubious

    dubious Regular Member

    Joined:
    Apr 22, 2012
    Messages:
    235
    Likes Received:
    222
    Occupation:
    Project Manager/Business Development Manager
    Location:
    Australia
    That's the wrong mentality, you should think of Progressive Enhancement.

    Make the highest quality web pages possible, as long as the site is usable and accessible in older versions due to fallbacks then it's ok.

    a) Does the website *need* transparency? People with IE8 and below can live with solid colour.

    Watch this video, it'll blow your mind.

     
    Last edited by a moderator: May 18, 2016