{"id":81,"date":"2018-03-18T15:54:05","date_gmt":"2018-03-18T14:54:05","guid":{"rendered":"http:\/\/test.ekiwi.de\/?p=81"},"modified":"2018-03-18T15:54:05","modified_gmt":"2018-03-18T14:54:05","slug":"transparenter-iframe","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/81\/transparenter-iframe\/","title":{"rendered":"Transparenter Iframe"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/81\/transparenter-iframe\/#Videoanleitung\" >Videoanleitung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/81\/transparenter-iframe\/#Download\" >Download<\/a><\/li><\/ul><\/nav><\/div>\n<p>Iframes sind eine tolle M\u00f6glichkeit externe Inhalte in HTML-Seiten einzubinden. Vorteil und Nachteil zugleich: beide HTML-Seiten sind voneinander strikt getrennt. Das bedeutet, dass CSS-Code der einen HTML-Seite nicht das Design der anderen Seite ver\u00e4ndert. Dies betrifft auch den Hintergrund. Bindet man z.B. ein Formular mittels IFrame ein, hat das Formular seine eigene Hintergrundfarbe.<\/p>\n<p><!--more--><\/p>\n<p>Eine M\u00f6glichkeit ist, dass die einzubindende HTML-Datei einfach die gleiche Hintergrundfarbe hat. Die andere M\u00f6glichkeit, die schauen wir uns hier an, ist den IFrame und die HTML-Seite transparent zu machen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Videoanleitung\"><\/span>Videoanleitung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/cO57FqgqvYU\" allowfullscreen=\"allowfullscreen\" width=\"640\" height=\"360\" frameborder=\"0\"><\/iframe><\/p>\n<p>Schauen wir uns ein Beispiel an. Wir binden ein Formular in eine HTML-Seite ein. Diese HTML-Seite hat einen Hintergrund. Standardm\u00e4\u00dfig sieht es so aus:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-82\" src=\"\/wp-content\/uploads\/2018\/03\/transparent_iframe_1.png\" alt=\"\" width=\"500\" height=\"385\" srcset=\"\/wp-content\/uploads\/2018\/03\/transparent_iframe_1.png 500w, \/wp-content\/uploads\/2018\/03\/transparent_iframe_1-300x231.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>Das Formular, bzw. die eingebundene HTML-Seite hat einen wei\u00dfen Hintergrund. Sieht nicht schick aus. Daher machen wir den Hintergrund nun transparent. Dazu sind zwei Dinge notwendig. Als erstes binden wir ein <code>allowtransparency=\"true\"<\/code> in den Code des Iframes ein:<\/p>\n<pre>&lt;iframe src=\"formular.html\" name=\"iframe\" scrolling=\"yes\" frameborder=\"0\" \r\nmarginheight=\"0px\" marginwidth=\"0px\" height=\"450\" width=\"600\" allowtransparency=\"true\"&gt;\r\n&lt;\/iframe&gt; \r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-83\" src=\"\/wp-content\/uploads\/2018\/03\/transparent_iframe_2.png\" alt=\"\" width=\"660\" height=\"63\" srcset=\"\/wp-content\/uploads\/2018\/03\/transparent_iframe_2.png 660w, \/wp-content\/uploads\/2018\/03\/transparent_iframe_2-300x29.png 300w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/p>\n<p>Dies allein reicht jedoch meist noch nicht aus. Schauen wir uns daher den CSS-Code der eingebundenen HTML-Seite an:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-84\" src=\"\/wp-content\/uploads\/2018\/03\/transparent_iframe_3.png\" alt=\"\" width=\"296\" height=\"56\"><\/p>\n<p>Hier ist eine feste Hintergrundfarbe gesetzt. Diese entfernen wir, das gen\u00fcgt in den meisten F\u00e4llen bereits. Ansonsten f\u00fcgen wir noch ein <code>body { background: transparent; }<\/code> ein:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85\" src=\"\/wp-content\/uploads\/2018\/03\/transparent_iframe_4.png\" alt=\"\" width=\"282\" height=\"66\"><\/p>\n<p>Das Ergebnis kann sich sehen lassen:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86\" src=\"\/wp-content\/uploads\/2018\/03\/transparent_iframe_5.png\" alt=\"\" width=\"500\" height=\"405\" srcset=\"\/wp-content\/uploads\/2018\/03\/transparent_iframe_5.png 500w, \/wp-content\/uploads\/2018\/03\/transparent_iframe_5-300x243.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Download\"><\/span>Download<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a class=\"fasc-button fasc-size-medium fasc-type-flat fasc-ico-before dashicons-admin-site\" style=\"background-color: #33809e; color: #ffffff;\" href=\"\/wp-custom\/transparent_iframe\/transparenter_iframe.zip\">Download des Beispiels<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Iframes sind eine tolle M\u00f6glichkeit externe Inhalte in HTML-Seiten einzubinden. Vorteil und Nachteil zugleich: beide HTML-Seiten sind voneinander strikt getrennt.<\/p>\n","protected":false},"author":1,"featured_media":61,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5],"tags":[4,20],"class_list":["post-81","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","tag-html","tag-iframe"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/81","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/81\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/61"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=81"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=81"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}