ホームページ >ウェブフロントエンド >CSSチュートリアル >IE ff Opera でアルファ透明化を同時にサポートする方法_体験交流

IE ff Opera でアルファ透明化を同時にサポートする方法_体験交流

WBOY
WBOYオリジナル
2016-05-16 12:04:411080ブラウズ

今日は CSS Alpha の透明性について一緒に学びましょう。
CSS Alpha の透明性に関する関連知識。まず、次のコードを見てください:

コードをコピー コードは次のとおりです。

filter:alpha(opacity =50); /* IE */
-moz-opacity:0.5; /* Moz FF */
opacity: 0.5; /* CSS3 をサポートするブラウザ (FF 1.5 もサポート) */

簡単に説明すると、IE はプライベート属性 filter:alpha(opacity) を使用し、Moz ファミリはプライベート属性 -moz-opacity を使用し、標準属性は opacity (CSS 3、Moz ファミリ) CSS3を部分的にサポートしています)。次の値は透明度です。パーセンテージまたは 10 進数 (アルファ (不透明度)) を使用します。0 より大きく 100 未満の値を使用します。実際にはパーセンテージです)。

上記のコードからは Opera は見えません。そうです、Opera はまだ標準の不透明度をサポートしておらず、アルファ透明度をサポートする独自のプライベート プロパティも持っていません。
ただし、Opera がアルファ透明 PNG 画像をサポートしていることはわかっています (もちろん Moz Family もサポートしています)。したがって、背景画像を使用してアルファ透明度を実現できます。

キーは次のとおりです:
コードをコピー コードは次のとおりです:
背景: 透明 URL(alpha80.png) 左上の繰り返し!重要;
背景:#ccc;
フィルタ:alpha(opacity=50);

Moz ファミリー以降はアルファ透明 PNG をサポートしているため、そのプライベート プロパティを使用する必要はありません。もちろん、標準の不透明度を使用することもできますが、アルファ透明イメージと不透明度を同時に使用しないでください。そうしないと、2 つが混合したものになります。上記の例をダウンロードして、/*opacity:.5;*/ のコメントを確認してください。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。