web-dev-qa-db-ja.com

属性「allowtransparency」はありません

私はいくつかの代替方法を探しています：

<iframe transparency=true   ...

W3C検証を行うと、次のエラーが表示されます。

Column 31: there is no attribute "allowtransparency"

このCSSを使用する場合、

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

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

htmlcssw3cw3c-validation
35
Bharanikumar

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のテキストが表示されますが、背景は明るい緑色になります。

（Safari、Firefox、およびChrome、Windows XPの場合はChrome）でテスト済み）

編集：キーはこれです：ソースページは独自の背景を設定できません。存在する場合、透明な背景は無視されます。

更新：Safari 12、Chrome 73、およびmacOS High Sierra上のFirefox 65を使用して、これ（2019年3月）をテストしましたが、引き続き機能します。

32
james.garriss

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

iframe {
    background-color: transparent;
}

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

13
Yi Jiang

JQueryファイルをインクルードしている場合、jQueryでこれを実行する方法があります。

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

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

（この方法では、すでにhaveiframe {background-color:transparent}whichは古いIEバージョン）では動作しません

4
Joe H

まず、 '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要素に）。

お役に立てれば！

1
Andrew

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

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

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

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

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

1
Dave Everitt