2019/02/27更新

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

このエントリーをはてなブックマークに追加            

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



iframeの背景は透過する

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



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

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

  1. 読み込むHTMLファイルの、htmlタグの背景を透過させる。
  2. 読み込む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、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。