2019/02/27更新

[フロントエンド] iframeの背景を透過させる2つのポイント

こんにちは、@yoheiMuneです。
今日はiframe表示で、iframeの背景を透過させる方法について、ブログを書きたいと思います。

iframeの背景は透過する

2019年時点の最近のブラウザであれば、特に何もしなくてもiframeの背景は透過しますが、「あれ、透過しないな〜」と思った時に確認すべき2つのポイントをお伝えします。

iframeの背景を透過させるには

具体的には、以下の2つの設定を確認します。

読み込むHTMLファイルの、htmlタグの背景を透過させる。
読み込むHTMLファイルの、bodyタグの背景を透過させる。

以前は「iframeタグにallowtransparency="true"属性を指定する」という対応もあったようですが、ChromeやIE11など主要ブラウザは、その指定がなくても背景が透過するようです。

動作サンプル

以下は、iframeの背景を透過させたサンプルです。

実装方法

上記サンプルの実装内容は、以下の通りです。

<div class="iframe-container">
    <iframe 
        src="./sample.html" 
        frameborder="0"></iframe>
</div>
<style>
    .iframe-container {
        width: 90%;
        max-width: 500px;
        margin: 50px auto;
        background-color: pink;
    }
</style>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        html, body {
            background: transparent;  /* iframe自体の背景は透過. */
        }
        p {
            padding: 20px;
            background: rgba(0, 0, 0, 0.25);  /* pタグ背景を黒の半透過にしています. */
        }
    </style>
</head>
<body>
    <p>iframe内の文字列です。</p>
</body>
</html>

最後に

今回の実装は、お仕事の実装で、iframeを透過させたいぞーという話になり、調査しました。

最後になりますが本ブログでは、フロントエンド、インフラ、サーバー、PHP、Swift、Python、Node.js、Java、Linux、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！