Am einfachsten kann man transparente Effekte mit der Trickkiste des Grafikprogramms als so genannte Pseudotransparenzen erstellen. Und in den meisten F\u00e4llen ist das auch ausreichend. Wenn jedoch Texte auf transparentem Hintergrund st\u00e4ndig wechseln oder man ganze Hintergrundbereiche transparent erstellen will, muss man sich anderer Methoden bedienen:<\/p>\n
Drei M\u00f6glichkeiten habe ich hier zusammengetragen:<\/p>\n
PNG ist ein Bildformat, in welchem Alpha-Transparenzen (Verlaufstransparenzen) gespeichert werden k\u00f6nnen. F\u00fcgt man ein solches Bild als Hintergrundgrafik ein, erscheint der Hintergrund transparent ohne dass man daf\u00fcr CSS benutzen m\u00fcsste.<\/p>\n
Der Nachteil dieser Methode ist allerdings, dass nur der Internet-Explorer 7 und 8 diese Transparenz anzeigen kann. Kann auf eine ad\u00e4quate Darstellung im IE6 nicht verzichtet werden, muss ein workaround via conditionel comments<\/a> eingef\u00fcgt werden. Beispiel mit einem transparentem PNG<\/a> IN CSS3 kann mit der Eigenschaft „opacity“ die Transparenz eines Objekte bestimmt werden. Dazu weist man dem Element die Eigenschaft „opacity“ zu und einen Wert zwischen 0 und 1. Derzeit wird ja gemunkelt, dass der IE9 mit vollst\u00e4ndiger Umsetzung von CSS3 in Arbeit ist, alle Versionen darunter k\u00f6nnen jedoch noch nicht damit umgehen. Deswegen muss auch hier ein workaround mit den propiet\u00e4ren IE-Filtern und conditionel comments installiert werden:<\/p>\n Wer jetzt auch noch den IE6 zur gew\u00fcnschten Darstellung \u00fcberreden m\u00f6chte, muss die Gr\u00f6\u00dfenangaben des Containers in Pixel statt in Prozent angeben und die ConditionelComments erweitern. Die jeweiligen Werte sind so zu w\u00e4hlen, dass die Abmessungen in jedem Fall ausreichen. Durch die Eigenschaft overflow:hidden wird der Anzeigebereich auf die gew\u00fcnschte Gr\u00f6\u00dfe begrenzt.<\/p>\n Beispiel mit CSS3 opacity<\/a><\/p>\n Nicht ganz so neu, aber dennoch nicht so gel\u00e4ufig ist, dass man im CSS-Stylesheet die Farbangaben statt hexadezimal auch mit RGB angeben kann. Aber auch hier muss der Internet-Explorer eine Sonderbehandlung via conditionel-comments erfahren, sieht dann so aus: Beispiel mit CSS3 opacity<\/a><\/p>\n Hier noch einige weiterf\u00fchrende Links:<\/strong> Alle drei L\u00f6sungen sind verwendbar. Wenn es um dekorative Gestaltung geht, hat man den gr\u00f6\u00dften Spielraum, wenn man mit transparenten PNG arbeitet. Allerdings muss man in Kauf nehmen, dass Bilder, die ganze Hintergrundfl\u00e4chen ausf\u00fcllen u.U. zu Lasten der Ladezeit einer Seite gehen k\u00f6nnen. Wenn man also nicht unbedingt Muster braucht, w\u00fcrden sich CSS3 opacity oder RGBa anbieten. Solange aber die alten IE noch im Einsatz sind, m\u00fcsste bei der L\u00f6sung mit opacity ein div aus rein dekorativen Gr\u00fcnden eingef\u00fcgt werden. Arbeitet man mit einem Framework, kann man davon ausgehen, dass dann das Template modifiziert werden muss. Ja, nein, ja, nein – ich habe sicherlich schon einige Webseiten gemacht, bei denen ich deko-divs eingef\u00fcgt habe – man sollte aber abw\u00e4gen, ob die Gestaltung es wert ist. Tendenziell w\u00fcrde ich deswegen die rgba L\u00f6sung vorziehen.<\/p>\n","protected":false},"excerpt":{"rendered":" Man kann sich dar\u00fcber streiten wie viel Dekorationslust der Gestaltung einer Webseite zutr\u00e4glich ist oder auch nicht. Nicht immer gilt: viel hilf viel. Dennoch: Soll es ein Hingucker werden, z\u00e4hlen – neben Farbverl\u00e4ufen – transparent erscheinende Objekte oder Hintergrundbilder zu den beliebten Spielerein. In den meisten F\u00e4llen kann man mit grafisch erstellten Pseudotransparenzen arbeiten, wenn jedoch ganze Hintergr\u00fcnde transparent erscheinen sollen oder ein Text auf einem transparentem Hintergrund st\u00e4ndig wechselt, k\u00f6nnen auch andere M\u00f6glichkeiten angewandt werden. In diesem Artikel stelle ich drei Verfahren vor.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[63,1039],"yst_prominent_words":[1051,1052,1053,1054,1055,1056,1057,1058,1059,1044,1060,1045,1061,1046,1062,1047,1063,1048,1049,1050],"class_list":["post-1769","post","type-post","status-publish","format-standard","hentry","category-webdesign","tag-css","tag-webentwicklung"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/1769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=1769"}],"version-history":[{"count":5,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/1769\/revisions"}],"predecessor-version":[{"id":4515,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/1769\/revisions\/4515"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=1769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=1769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=1769"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=1769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n#wrapper {
\nbackground-image: none;\/*png entfernen*\/
\nfilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images\/transparent.png',sizingMethod='scale');
\nzoom:1;}<\/code><\/p>\nBeispiele<\/h4>\n
\nVariation mit 2 transparenten Bildern \u00fcbereinandergelegt<\/a><\/p>\n
\n<\/a>Transparenz mit CSS3 opacity<\/h3>\n
\n.transparent {opacity: 0.5;}<\/code>
\nDa jedoch auch hier der InternetExplorer in der Umsetzung von CSS3 noch nicht so weit ist, muss via conditionel comments ein workaround eingef\u00fcgt werden.
\n
\n.transparent {
\n-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\";
\nfilter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
\nopacity:0.5;
\nzoom:1;}
\n<\/code>
\nDer Nachteil dieser Methode ist jedoch, dass die Eigenschaft „opacity“ auf die Kindelemente vererbt wird. Im Ergebnis wir dadurch Text, der sich in dem Element befindet, ebenfalls transparent. Umgehen kann man dieses Problem mit einer \u00c4nderung im Markup. Hier ist ein text, der nicht transparent werden soll.<\/p>\nPositionierung via css :<\/h4>\n
\n#wrapper {
\nmin-height: 100%;
\nwidth: 960px;
\nmargin: 0 auto 0 auto;
\npadding: 30px 0 30px 0;
\nposition: relative;<\/span>
\n}
\n.transparent {
\nbackground: transparent url(images\/background.png) repeat-y;
\nopacity: 0.5;
\nposition: absolute;<\/span>
\ntop:0;
\nwidth: 100%;
\nheight: 100%;
\n}
\n.opak {
\nposition: relative;<\/span>
\ncolor: #000;
\nmargin: 20px;
\n}<\/code>
\nDer umgebende container „wrapper“ wird relativ positioniert. Dadurch ist es m\u00f6glich das Element „transparent“ absolut zu positionieren und den transparenten Hintergrund vom Inhalt zu trennen. Das div „opak“ ist damit kein Kindelement von „transparent“, die Transparenz bleibt so auf das div „transparent“ begrenzt und greift nicht auf die Textinhalte von „opak“ \u00fcber. Der Text bleibt frei von Transparenz.<\/p>\n
\n.transparent {
\n-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\";
\nfilter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
\nopacity:0.5;
\n}
\n.opak {
\nzoom:1;\/*has layout Bug*\/
\nleft: 20px;
\n}
\n<\/code><\/p>\n
\n#wrapper {
\noverflow: hidden;
\n}
\n.transparent {
\nwidth: 1000px;
\nheight: 10000px;
\n}
\n<\/code><\/p>\nBeispiel<\/h4>\n
\n<\/a>Transparenz mit rgba<\/h3>\n
\nF\u00fcr ein div „wrapper“, dessen Hinergrundfarbe transparent erscheinen soll, notiert man in der .css Datei:
\n
\n#wrapper {
\n...
\nbackground-color: rgba(102,204,255,0.5);
\n}
\n<\/code><\/p>\n
\n
\n#wrapper {
\nbackground-color: rgb(102,204,255);
\n-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\";
\nfilter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
\nopacity:0.5;
\n}
\n<\/code><\/p>\nBeispiel<\/h4>\n
\nPeter Kr\u00f6ner: Schoenes-neues-css-rgba-und-hsla<\/a> zu lesen.
\n24way.org: working-with-rgba-colour<\/a>
\nDirk Jesse: Transparente Hintergruende mit css\/<\/a>
\nEric Eggert : Cross Browser rgba<\/a><\/p>\nEinsatz<\/h3>\n