Transparente Elemente im Style

[chris3007]

Hallo zusammen,

in benutze den Alpha-filter (moz-opacity für Netscape & co) in einem table. Der Filter ist in einer class in der css hinterlegt.

Nun möchte ich aber, dass die Texteile im table vom Filter nicht betroffen sind, sondern z.b. eine schwarze Schrift auch ganz schwarz angezeigt wird.

Kennt da jemand einen Trick??

Gruß
Chris

[chris3007]

Ok, habe nun selbst eine Lösung gefunden.

Für alle, die auch gerne mal mit Transparenzen arbeiten möchten (sieht einfach gut aus...) hier meine kleine zusammenfassung:

----------------------------------------------------------------------------
Meine Transparenzen kann man hier anschauen (Hintergrund scheint durch Navigation druch): http://www.pronature.nugro.de (Seite ist noch in Entwicklung)

Problem:
- Den Alpha-Filter zur Erstellung von Transparenzen versteht nur der Internet Explorer
- Für Netscape & Co. funktioniert das dann mit "moz-opacity"

Problemstellung:
- Hintergrund soll tranparent sein, die in der Zelle enthaltenen Bilder und Texte sollen aber keine Transparenz aufweisen


Lösung für Internet Explorer:
In der css wird eine Klasse angelegt, z.B.:

Code: Alles auswählen

.teeserbg		 	{color: #000000;
					 background-color: transparent;
					 background-image:url('http://www.pronature.nugro.de/images/teeserbg.jpg') ;
					 filter:alpha(opacity=30);
					 background-repeat: repeat;
}

Diese Klasse wird dann im Template im entprechenden table aufgerufen. Um den Text nicht transparent erscheinen zu lassen wird der Text in einen div-tag eingeschlossen, z.B.:

Code: Alles auswählen

<div style="color:#000000; position:relative;">
			<p>
			Dein Text
			</p>	
			</div>	

Lösung für Netscape & Co.:
Problem hier ist, dass ein Filter sich durch Einschließen des Textes in einen div-Tag nicht abschalten lässt. Auch der Text würde also transparent angezeigt werden!!
Das Hintergrundbild, dass transparent sein soll, wird daher nicht mittels eines Filters, sondern mit Hilfe eines teiltransparenten PNG erstellt.
Nun ist es notwendig, ein kleines Script einzubauen, welches prüft, welchen Browser der Benutzer verwendet.
Das Script sieht wie folgt aus:

Code: Alles auswählen

<style type="text/css">
<!--
@import url('site.css');
/* diese Import-Regel verstehen IE, Mozilla, Opera,... */

@import url('sitemz.css') all;
/* IE versteht diese Import-Regel nicht */
-->
</style>

Der zweite Import bewirkt bei Netscape & Co, dass die erste css-Datei "site.css" durch "sitemz.css" überschrieben wird. Da IE den zweiten Import aber nicht interpretieren kann, zieht der IE die css-Daten aus der Datei "site.css".

Die jeweiligen css-Dateien können nun jeweils optimiert werden.
Im IE verwende ich als Hintergrundbild also ein jpg und erwirke die transparenz durch den alpha-filter.

Bei Netscape, Mozilla & Co. ist das Hintergrundbild ein teiltransparentes PNG und es wird in der CSS ohne Filter gearbeitet.


Hoffe das war jetzt einigermaßen gut erklärt.
Bei Fragen helfe ich gerne nochmal...

Gruß
Chris