[TYPO3-UG Denmark] Gennemsigtigt baggrund (opacity)

[Simon Rasch]

> Main container indeholder de to indholdskolonner normal og højre.
>
> Jeg har prøvet at definere opacity i css med følgende:
>
> #main-container
> {
> 	width: 1011px;
> 	display: inline-block;
> 	position: relative;
> 	margin: 0px auto auto auto;
> 	height: auto;
> 	background-color: #FFF;
> 	/* for IE */
>  	filter:alpha(opacity=60);
>  	/* CSS3 standard */
>  	opacity:0.6;
> }
>
>
> Dette virker ikke - så er der andre muligheder via feks. typoscript at
> definere dette?

For det første skal du vide, at hvis main-container er transparent, så  
vil alt det der er indeni også være det.
Hvis du f.eks skriver
<div id="main-container">
     <div id="normal">  Hejsa  </div>
</div>
så vil #normal  være ligeså transparent som #main-container.

Jeg vil ikke spille klog på best practice, men det virkede for mig at  
lave en #main-container  og en #main-container-transp i CSS.
De har identiske left, top, width og height osv Men den ene tager sig  
af transparency og har z-index mindre end den anden, som indeholder  
tekst osv. Altså ingen tekst INDEN I den div som er transparent, men  
OVENPÅ.....
<div id="main_transp"> </div>
<div id=" main">    <div id="normal"> </div>     </div>
Det virker for mig lidt som en cowboy-løsning, men det var det bedste  
jeg lige kunne finde på.... Nogen der har en bedre løsning ?

Jeg benytter følgende css for at lave gennemsigtighed:

    	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;

og det virker i Firefox, Safari, IE 7 og 8 ved ikke med 6'eren som vi  
jo alle hader....men det er en anden snak...
tror egentlig nok jeg legede med noget gennemsigtig gif som baggrund,  
hvis browseren er IE6 eller ældre

Håber det var til nogen hjælp, eller at andre vil byde ind med mere  
korrekte oplysninger, da jeg bestemt ikke er css-haj. Jeg skriver bare  
udfra egne erfaringer.

Mvh
Simon Rasch