Image OPACITY

P

proph37

Newbie

Apr 5, 2012

40

10

• Aug 21, 2012

• #1

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!

 

dubious

Regular Member

Apr 22, 2012

240

226

• Aug 21, 2012

• #2

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

 

P

proph37

Newbie

Apr 5, 2012

40

10

• Aug 21, 2012
• Thread Starter Thread Starter

• #3

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);
}

 

jazzc

Elite Member

Jan 27, 2009

2,964

14,717

• Aug 21, 2012

• #4

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);

 

P

proph37

Newbie

Apr 5, 2012

40

10

• Aug 21, 2012
• Thread Starter Thread Starter

• #5

jazzc said:

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);

Click to expand...

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

jazzc

Elite Member

Jan 27, 2009

2,964

14,717

• Aug 21, 2012

• #6

The only place that matters and does not work is IE8 and lower - but there 's a fallback for that:
http://css-tricks.com/rgba-browser-support/

 

P

proph37

Newbie

Apr 5, 2012

40

10

• Aug 22, 2012
• Thread Starter Thread Starter

• #7

Well i worked so hard not to implement CSS3 and to fully support older browsers, seems like im cut off huh :/

 

dubious

Regular Member

Apr 22, 2012

240

226

• Aug 23, 2012

• #8

proph37 said:

Well i worked so hard not to implement CSS3 and to fully support older browsers, seems like im cut off huh :/

Click to expand...

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