[Typo3] Image background...

Eirik Wulff eirik at wulff.biz
Wed Sep 28 23:07:04 CEST 2005


Kristian Wind wrote:
> Hi Peter,
> 
> I have no idea how to. Please explain...

Opacity is a difficult word for non-transparency, so if you set a CSS 
DIV-class to:

DIV.sixty-forty
{
  opacity: .4;
  filter: alpha(opacity=40);
}

Ex.: <div class="sixty-forty">content...etc</div>

it gives you content with 40% opactiy (which means 60% transparency). So 
if only the images inside DIV.sixty-forty should not be transparent, it 
means that their opacity should be 1.0. This can be accomplished in CSS 
by making a new selector (= all img tags within DIV.sixty-forty):

DIV.sixty-forty IMG
{
  opacity: 1.0;
  filter: alpha(opacity=100);
}

Ex.: <div class="sixty-forty"><img src="..."> content... etc...</div>

...OR by making a CSS class for the images:

.not-transparent
{
  opacity: 1.0;
  filter: alpha(opacity=100);
}

Ex.: <img class="not-transparent" src="...">

1.0 is the default value for opacity, hence making standard objects 
non-transparent.

The brilliance of CSS is that it (mostly) will inherit properties from 
its surrounding CSS-code (Cascading is just that), and that objects 
inside other objects may override its properties by setting them to 
another value. There are some differences between IE and the other 
browsers that force you to use different code to accomplish a single 
task (hence both 'filter' and 'opacity' in the example)

There is a nice CSS tutorial on http://www.w3schools.com/css/


Regards,

E. Wulff



More information about the TYPO3-english mailing list