12

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

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

2) 奇妙な '-ms-filter' を介して rgba をサポートする Internet Explorer。

3) rgba をサポートしていないブラウザーですが、「データ URI スキーム」で base64 png 画像を使用できました。(ブラウザーが URI スキームをサポートしていない場合でも、これによれば実行できます。)

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

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

編集：

コンテンツを完全に表示しながら、div の背景を半透明にしたい。

4

3 に答える 3

36

クロスブラウザ方式については、次のブログ投稿を参照してください。

.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+Opera10で利用できます。

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

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

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

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

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

JavaScriptを使用してクライアント側のPNGファイルを生成します。クールなアイデア、本当に：

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

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

于 2011-01-25T10:10:19.190 に答える
0

rgba をサポートしていないブラウザは、base64 もサポートしていないと思います。ただし、単純に 2x2 ピクセルの半透明の png 背景画像を使用できます (IE の奇妙なバグを避けるために 1x1 ではありません)。

于 2011-01-25T10:05:23.083 に答える
-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-13T19:42:27.320 に答える