[TYPO3-UG Denmark] Gennemsigtigt baggrund (opacity)

Jeppe Donslund jeppe at donslund.net
Sun Aug 29 21:34:38 CEST 2010


Er det ikke en mulighed at lave en halvgennemsigtig png som så bliver
repeated i hele din div?
Det virker ikke i IE6, men det er vel også lige meget ;-)


MVH
Jeppe Donslund


-----Oprindelig meddelelse-----
Fra: typo3-ug-denmark-bounces at lists.typo3.org
[mailto:typo3-ug-denmark-bounces at lists.typo3.org] På vegne af Simon Rasch
Sendt: 29. august 2010 20:28
Til: TYPO3 Usergroup Denmark
Emne: Re: [TYPO3-UG Denmark] Gennemsigtigt baggrund (opacity)

> 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
_______________________________________________
TYPO3-UG-Denmark mailing list
TYPO3-UG-Denmark at lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-ug-denmark



More information about the TYPO3-UG-Denmark mailing list