コンテンツ（テキストと画像）を非透過に保ちながら、ブラウザを透過するrgbaの透明な背景

すべてのブラウザで動作するrgbaの背景を取得したい。私はいくつかの検索を行い、一般にそこに3種類のブラウザがあることを発見しました：コンテンツ（テキストと画像）を非透過に保ちながら、ブラウザを透過するrgbaの透明な背景

1）rgbaをサポートするブラウザ。

2）奇妙な '-ms-filter'のことでrgbaをサポートするInternet Explorer。

3）rgbaをサポートしていないブラウザでは、 'data URI scheme'でbase64 pngイメージを使用できます。（ブラウザがURIスキームをサポートしていないとしても、それでもやり遂げることができます。）

ブラウザをサポートするrgbaには何の問題もありませんが、IEで動作させることはできますが、問題はありませんURIスキームのためにクライアントサイドのbase64 pngイメージを生成する方法。私のrgba値は一定ではないので、実際にはpngファイルを事前生成したくありません。私はphp gdライブラリを使って動的なpng生成を行うことができますが、クライアント側でこれをすべて実行したいと思っています。だから、私は知っている、そこにJavaスクリプトで半透明のPNG画像を生成するための良い方法があります。この後、私はbase64でエンコードしてURIスキームで使用できますか？

ありがとうございます。

編集：コンテンツが完全に表示させながら

は、私は、半透明のdivの背景を持っていると思います。

出典

2011-01-25 Mikk

不透明または部分的な透明性を持たせようとしていますか？ –

css3pieが唯一の回答かもしれません。これはJSライブラリです。はい、それは迷惑ですが、今まで私はIE8以下で動作するMSフィルタのプロパティの証拠は見ていません。 –

See this blog post：Internet ExplorerでFirefoxの 3+のSafari 2+オペラ10

フィルタ：

.alpha60 { 
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0); 
    /* RGBa with 0.6 opacity */ 
    background: rgba(0, 0, 0, 0.6); 
    /* For IE 5.5 - 7*/ 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); 
    /* For IE 8*/ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; 
}

Webブラウザのサポート

RGBAのサポートはで利用可能ですInternet Explorer 5.5以降にはが利用可能です。

これは実質的に皆のためにのためにこれが働くことを意味します！ IEフィルタの色を生成するための簡単な方法のための

See here。

これを行うと、「データURIスキーム」で「base64 pngイメージ」を使用する必要がなくなります。

あなたは本当に、本当に（私はここでの必要性を見ることができない）クライアント側.png画像を生成する場合：本当に

Generate client-side PNG files using JavaScript.クールなアイデア、：

それがあったがもう一度それらの夜のうちの1つ私はの終わりが見えないで薬物のようにハックしました。確かに、5年前のあなたはがこのようなプロジェクトで私を愛していましたが、HTML5の時代にはのキャンバスで要素はあなたを感動させません。だからキャンバス、SVG、またはサーバー側のレンダリングとAJAX の処理をせずに、クライアントのサイドイメージを作成する証拠として受け取る。

これはどのように可能ですか？さて、は PNGデータストリームを作成するlibpngのようなクライアント側のJavaScript ライブラリを実装しました。結果のバイナリのデータは、Base64エンコーディングを使用して URIスキームに追加できます。

出典

2011-01-25 10:10:19 thirtydot

ありがとうございましたが、私が関心を寄せていた部分は、「RGBaをサポートしていないWebブラウザのフォールバック」でした。 URIスキームでやってもいいと思っていました。おそらく、古いブラウザを使用している人はあまり心配していませんか？ – Mikk

どのような古いブラウザですか？これは明らかに* IE 5.5 *で動作します。 – thirtydot

+1クライアント側のbase64イメージは必要ありません... 99％のユーザーが素晴らしい不透明度を得るでしょう。 – kapa

rgbaをサポートしていないブラウザはbase64をサポートしていないと思います。しかし、2x2 px半透明のpngの背景イメージ（1x1ではなくIEで奇妙なバグを避けるために）を使うことができます。クロスブラウザの方法について

出典

2011-01-25 10:05:23 MatTheCat

ありがとうございます。私は私の質問の下に記事を掲載しました。そこには、base64イメージの回避策があります（それはテストしていません）。また、私はrgbとalpha valusが変わる可能性があるので、pregenerated/dynamic（php + gd）pngファイルを使用したくありません。 – Mikk

-1

Webkit Safari、IE5、Firefox .9以前に戻って透明度を使用することができます。だから誰もそれを使用しません。もちろん http://css-tricks.com/css-transparency-settings-for-all-broswers/

.transparent { 
zoom: 1; 
filter: alpha(opacity=50); 
opacity: 0.5; 
}

あなたの好きなJavaScriptライブラリを介して、またはで手個々の要素にこれらのCSSプロパティを設定することができます。あなたのフォールバックとして、RBGを通常どおりに設定し、適切な透明度を追加してください。

出典

2012-07-13 19:42:27

コンテンツ（テキストと画像）を非透過に保ちながら、ブラウザを透過するrgbaの透明な背景

答えて

関連する問題