web-dev-qa-db-ja.com

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

Rgbaの背景をすべてのブラウザで動作させたいです。いくつか検索したところ、一般的に3種類のブラウザがあることがわかりました。

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

2）奇妙な「-ms-filter」を介してrgbaをサポートするInternetExplorer。

3）rgbaをサポートしていないブラウザですが、「データURIスキーム」でbase64png画像を使用できます。 （ブラウザがURIスキームをサポートしていない場合でも、 this によると、それでも実行できます。）

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

ありがとうございました。

編集：

コンテンツを完全に表示しながら、半透明のdiv背景が必要です。

javascriptcsscross-browserrgba
12
Mikk

このブログ投稿を参照 クロスブラウザ方式の場合：

.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サポートは次の場所で利用できます：Firefox 3+ Safari 2+ Opera 10

Internet Explorerのフィルターは、Internet Explorer5.5以降で使用できます。

これは、これが事実上すべての人に有効であることを意味します！

ここを参照 IEフィルターの色を生成する簡単な方法については、.

これを行うと、「「データURIスキーム」を使用したbase64png画像」を使用する必要がなくなります。

あなたが本当に、本当にクライアントサイドを生成したいのなら.png画像（ここではその必要性がわかりません）：

JavaScriptを使用してクライアント側のPNGファイルを生成します。 すばらしいアイデアです。

それはまたしても、私が麻薬のようにハッキングした夜の1つであり、終わりは見えませんでした。確かに、5年前、あなたはそのようなプロジェクトで私を愛していたが、canvas要素を含むHTML5の時代には、あなたを感動させるのは難しい。したがって、キャンバス、SVG、またはサーバー側のレンダリングとAJAX処理なしで、クライアント側の画像を作成する証拠として使用してください。

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

36
thirtydot

Rgbaをサポートしていないブラウザはbase64もサポートしていないと思います。ただし、2x2 pxの半透明のpng背景画像を使用することもできます（IEの奇妙なバグを回避するために1x1ではありません）。

0
MatTheCat