{"id":333,"date":"2005-11-01T00:33:50","date_gmt":"2005-10-31T22:33:50","guid":{"rendered":"http:\/\/www.andare.ch\/blog\/?p=333"},"modified":"2007-07-27T10:16:32","modified_gmt":"2007-07-27T08:16:32","slug":"transparente-hintergrundbilder-im-ie","status":"publish","type":"post","link":"https:\/\/andare.ch\/blog\/2005\/11\/transparente-hintergrundbilder-im-ie\/","title":{"rendered":"Transparente Hintergrundbilder im IE"},"content":{"rendered":"<div class='microid-f9401a117dc08710ea57cfeec890c5d6d69b42ec'><p>Auf Grund eines <a href=\"http:\/\/blog.samsnet.org\/2005\/10\/27\/transparentes-png-mit-internet-explorer\/\" title=\"sams weblog: Trnasparente PNG in IE\">Artikels bei sam<\/a> habe ich nochmals einen Anlauf unternommen, die transparenten Elemente im Layout meines Blogs auch f\u00fcr IE Benutzer sichtbar zu machen. Und es klappt nun tats\u00e4chlich, zumindest in IE 5 und neuer.<\/p>\n<p>Das ganze besteht aus zwei Hacks, einem f\u00fcr die Hintergrundbilder und einem f\u00fcr die Bilder in den Postings.<\/p>\n<h4>Transparente Hintergrundbilder<\/h4>\n<p>Dies beruht einerseits auf einem Hack den ich via <a href=\"http:\/\/blog.samsnet.org\/2005\/10\/27\/transparentes-png-mit-internet-explorer\/#comment-607\">Kommentar<\/a> von <a href=\"http:\/\/www.flashjunior.ch\/\" title=\"Flash Junior\">FJ<\/a> bei sam&#8217;s Posting gefunden habe.<br \/>\nF\u00fcr die Blockelemente mit einem transparenten Hintergrundbild, habe ich folgende Definition im CSS abgelegt:<\/p>\n<p><code> * html div.menu {<br \/>\nbackground-image: none;<br \/>\nheight: 100%;<br \/>\nfilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='\/blog\/wp-content\/themes\/andare\/images\/nav_bg.png',sizingMethod='scale');<br \/>\n}<\/code><\/p>\n<p>Erkl\u00e4rungen:<\/p>\n<ul>\n<li>die Notation <code>* html div.menu<\/code> dient dazu, dass nur IE diese Definition interpretiert, d.h. sie muss folglich <em>nach<\/em> der Definition f\u00fcr die anderen Browser stehen.<\/li>\n<li><code>background-image: none;<\/code> muss definiert sein um das Bild, welches in der Standarddefinition zugeordnet ist, auszublenden.<\/li>\n<li><code>height: 100%;<\/code> dies oder eine exakte Breite oder H\u00f6he muss zwangsl\u00e4ufig definiert sein, ist keine Gr\u00f6sse definiert, funktioniert der nachfolgende Filter nicht.<\/li>\n<li><code>filter:\u00e2\u20ac\u00a6<\/code> Das ist die Microsoft Magie um das PNG transparent zu machen. Wichtig hier der Parameter auf der sizingMethod. <code>scale<\/code> skaliert das Bild auf die Gr\u00f6sse des Block Elements, <code>crop<\/code> zeigt nur den Teil des Bildes der in das Blockelement passt, <code>image<\/code> zeigt das Bild in der Originalgr\u00f6sse und passt die Gr\u00f6sse des Blockelements an.<\/li>\n<\/ul>\n<p>Zu beachen gilt es nun noch, dass zum Teil (!?) in den Blockelementen, die ein solchermassen definiertes transparentes Hintergrundbild haben, die Links die sich darin befinden, hinter dem Bild platziert werden und somit nicht mehr angeklickt werden k\u00f6nnen. Um auch dieses Problem zu beheben, muss das n\u00e4chste Element innerhalb des Blocks oder &#8217;sp\u00e4testens&#8216; der &lt;a&gt; Tag mit <code>position: relative;<\/code> und sicherheitshalber <code>z-index: 10;<\/code> definiert werden.<\/p>\n<h4>PNG Bilder in Postings<\/h4>\n<p>Dazu habe ich den Hack von <a href=\"http:\/\/webfx.eae.net\/dhtml\/pngbehavior\/pngbehavior.html\" title=\"PNG Behavior\">Erick Arvidsson<\/a> verwendet, den <a href=\"http:\/\/www.mongus.net\/pngInfo\/\" title=\"PNG Alpha Hack\">Hack<\/a> den sam referenziert hat, habe ich nicht zum Laufen gebracht.<\/p>\n<p>Wichtig beim Anwenden des Hacks ist, dass die Pfade zum .htc Dokument und zum transparenten Hilfs-GIF absolut definiert sind. Jedenfalls hab&#8216; ich&#8217;s nicht fertig gebracht, in der WordPress Umgebung einen relativen Pfad zu definieren, der funktioniert h\u00e4tte.<\/p>\n<h4>Beispiel<\/h4>\n<p>Schau Dir den HTML Code dieser Seite und die referenzierten CSS und htc Files an.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Mit einigem Aufwand ist es mir gelungen meinen Blog nun auch f\u00fcr den IE so anzeigbar zu machen, wie er eigentlich gedacht ist &#8211; fast zumindest.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[27,1],"tags":[383,359],"class_list":["post-333","post","type-post","status-publish","format-standard","hentry","category-internet","category-public","tag-internet","tag-public"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/andare.ch\/blog\/wp-json\/wp\/v2\/posts\/333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/andare.ch\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/andare.ch\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/andare.ch\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/andare.ch\/blog\/wp-json\/wp\/v2\/comments?post=333"}],"version-history":[{"count":0,"href":"https:\/\/andare.ch\/blog\/wp-json\/wp\/v2\/posts\/333\/revisions"}],"wp:attachment":[{"href":"https:\/\/andare.ch\/blog\/wp-json\/wp\/v2\/media?parent=333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/andare.ch\/blog\/wp-json\/wp\/v2\/categories?post=333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/andare.ch\/blog\/wp-json\/wp\/v2\/tags?post=333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}