38

私は別の方法を探しています：

<iframe transparency=true   ...

W3C検証を行うと、次のエラーが発生します。

Column 31: there is no attribute "allowtransparency"

このCSSを使用する場合は、

.iframe-trans-fix{
   opacity: 0;
   filter:alpha(opacity=0);
}

上記のスニペットでは、空白のiframeを取得しています。

4

5 に答える 5

37

W3CのHTML仕様で定義されていないのは事実ですが、allowTransparency属性があり、最新のすべてのブラウザー（およびInternet Explorer）でサポートされています。HTML5が教えてくれたように、カートは馬の前にあるはずです。

メインページindex.htmlに次のHTMLがあるとします。

<html>
    <body>
        <iframe src="source.html" 
                allowTransparency="true" 
                style="background-color:lightgreen;" 
                width="400" height="200">
        </iframe>
    </body>
</html>

そして、source.htmlは次のようになります。

<html>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, magna
           id bibendum sollicitudin, tellus tortor consequat enim, et mollis mauris 
           augue et dui. </p>
    </body>
</html>

ブラウザでメインページ（index.html）を開くと、iframeにsource.htmlのテキストが表示されますが、背景は薄緑色になります。

（MacOSXおよびInternetExplorer8ではSafari、Firefox、Chrome、Windows XPではChromeでテスト済み）

編集：重要なのはこれです：ソースページは独自の背景を設定できません。含まれている場合は、透明な背景を無視します。

更新：macOS HighSierraでSafari12、Chrome 73、Firefox 65を使用してこれをテストしました（2019年3月）。それでも機能します。

于 2011-03-03T14:41:38.207 に答える
14

あなたがここで何をしようとしているのかわかりませんが、これはあなたが探しているものでなければなりません：

iframe {
    background-color: transparent;
}

iframeもちろん、これは背景を透明にしたいことを前提としています。

于 2010-09-18T07:52:57.370 に答える
4

jQueryファイルを含めた場合、jQueryでこれを行う方法があります-

<!--[if lt IE 9]><script> $(".classname").attr("allowTransparency", "true"); </script><![endif]-->

.classnameをiframeの名前に変更するか、存在しない場合は作成します。（iframeからも属性を取り出します）iframeの終了タグの直後に配置すると、IE9より前のブラウザーに必要なallowTransparencyタグが追加されます。IE条件ステートメント内にあるため、W3Cバリデーターによって読み取られません。また、とにかく最新のjQueryバージョンを使用している場合は、人々がすでに言及しているすべてのCSSを追加することで、ブラウザー間の互換性とコンテンツの隠蔽の問題を排除します。allowTransparency属性は明確に定義された目的で作成されたため、サイレントに挿入できる場合は、CSSで再作成しようとしても意味がありません。これが誰かに役立つことを願っています！

iframe {background-color:transparent}（この方法は、古いIEバージョンでは機能しないものがすでにあることを前提としています）

于 2011-09-29T23:30:58.040 に答える
1

まず、'transparency = "true"'のようなものがないため、機能しません。

次に、背景を透明にしますか、それともiframe全体を透明にしますか？

CSS Opacityプロパティは、使用する要素内のすべてを透過的にします。不透明度は0から1まで変化します。ここで、0は完全に透けて見え、0.5は半分透明で、1は完全に見えます。

これをdivまたはiframe（またはその他）で使用すると、背景とテキストがすべて同じようにフェードします。

一方、最近のすべてのブラウザでは、RGBAカラーを使用して背景を部分的に透明に設定できます。あなたはこのようにそれをするべきです：

iframe.transparent {
    background-color: #FFF; /*this gives a background color for browsers that can't do RGBA color, like internet explorer*/
    background-color: rgba(255,255,255,0.5);
}

RGBAカラー定義は、不透明度属性（0 =クリア、1 =ソリッド）と同じように機能しますが、設定した特定のアイテムを透明にするだけで、そのアイテム内のアイテムには影響しません（つまり、内部のテキストには影響しません）。あなたのiframe）。最初の3つの数値は、0から255までのスケールでの色の赤、緑、および青の値です。

ただし、より優れたクロスブラウザーソリューションが必要な場合は、透明な.pngファイルを背景画像として使用することをお勧めします。IEでこれをテストする必要がありますが、iframeで特に機能するかどうかはわかりませんが、iframeに背景を設定せずに、透明な画像をiframe内に読み込むページの背景として設定することはできます（適用します）。そのページのbody要素に）。

お役に立てれば！

于 2010-09-19T05:05:55.410 に答える
1

  1. 、という名前のHTML属性がないtransparencyため、常にエラーが発生します。iframe transparency=true

  2. 不透明度をゼロに設定すると、要素はまったく表示されません。不透明度を定義する必要があります。

    opacity: 0.25; /* all modern browsers */
filter: alpha(opacity=25) /* IE */

上記のCSS（注：不透明度の値はIEの場合は0〜100、他のブラウザの場合は0-1）により、不透明度が設定されている要素の背景が色付きの場合でも、背後にある他の要素（ページの背景画像など）が透けて見えるようになります。

透明度の詳細な制御については、RGBA（A = alpha）を参照してください。ただし、可変ブラウザーのサポートに注意してください。

于 2010-09-18T08:34:26.920 に答える