[Typo3] Image background...

[JoH]

>>> I thing there is a bit confusion here. I am fully aware of how use
>>> opacity. What I need is how to attach the class to images - inside
>>> Typo3. What I mean is: what is the class-name for images in Typo3?
>>>
>>
>>
>> Do you (a) need a way to selectively add classes to individual
>> images,
>> or do you (b) need a way to apply styles to all images, or (c) will
>> the images you need to style always appear in the same html context?
>>
>> (a) is tricky :-)
>> (b) could be achieved in css like this:
>>
>> img { /* styles */ }
>>
>> (c) could be done this way:
>>
>> /* Styles every img inside <div id="content"> */
>> div#content img { /* styles */ }
>>
>> or this way:
>>
>> /* Applies certain styles to all p and ul inside <div id="content">
>> */ div#content p,
>> div#content ul { /*styles */ }
>>
>> /* Applies (presumably different) styles to all td inside <div
>> id="content"> */ div#content td { /* styles */ }
>>
>>
>> Do any of these give you a way to solve the problem?

> I have tried this:
>
> img {
> filter:Alpha(Opacity=100 ,FinishOpacity=100,);
> opacity: 1;
> -moz-opacity: 1;
> -khtml-opacity: 1;
> }
>
> No luck

Well - the solution is very simple:

You have to place the tags that should not be transparent _outside_ the
transparent tag and position them with position:relative.
Reason: Transparency will always be inherited (at least in IE - don't know
about others) even if you unset it for child elements of the transparent
element.
So something like this

<div transparency=50>
    <p transparency=0>
    Some text over the transparent block
    </p>
</div>

will not work, while this



<div transparency=50>
</div>

<div positioned over previous div>
    <p>
    Some text over the transparent block
    </p>
</div>

will work. To achieve this, you have to make sure that the two divs are of
the same size and that the second div has no background.
This could be done by placing the content into both of them but this would
increase the size of the code and result in doubled content.
Another way could be to assign matching width and height values to the divs.

You can even use this technique to partly overlap different transparent
blocks to create stunning design effects.

Joey

-- 
Wenn man keine Ahnung hat: Einfach mal Fresse halten!
(If you have no clues: simply shut your knob sometimes!)
Dieter Nuhr, German comedian
openBC: http://www.openbc.com/go/invuid/Jo_Hasenau