English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS3 opacity属性の使用方法と例

opacity CSS属性は、要素の透明度を指定します。

以下のテーブルは、この属性の使用方法とバージョン履歴、およびJavaScriptスクリプトでの使用方法を説明しています。

デフォルト値:1 (不透明)
適用:すべての要素
継承:ありません
アニメーション可能:は。参照してください アニメーション属性
バージョン: CSS3の新しい機能
JavaScriptの構文:object.style.opacity=0.5

opacityの使用方法の構文

この属性の構文は以下の通りです:

opacity: alphavalue | initial | inherit

以下の例では、opacity属性の使用方法を示しています。

  img {
   opacity: 0.25;
  }
  p {
   opacity: 0.5;
  }
テストをしてみる‹/›

属性値

以下のテーブルは、この属性の値を説明しています。

説明
alphavalue0(完全透明)から1(完全不透明)範囲の数字。もっと小さいまたはもっと大きな値はこの範囲内に制限されます。
initialこの属性をデフォルト値に設定します。
inherit指定された場合、関連する要素は親要素のopacityの属性値を使用します。

ブラウザの互換性

opacity属性のブラウザの互換性について、以下のテーブルの数字は、この属性をサポートするブラウザの最低バージョン番号を示しています;すべての主要ブラウザがこの属性をサポートしています。

  • Firefox 1。7+

  • Google Chrome1+

  • Internet Explorer 9+

  • Apple Safari 2+

  • Opera 9+

注意: Internet Explorer 8および、より古いバージョンではopacityをサポートせず、代わりに代替方法をサポートしています。ただし、Microsoft filter属性。お気に入り:filter: Alpha(opacity=50); 有关CSSの不透明度の詳細情報

さらに詳しく

以下の内容に関するチュートリアルを参照してください:CSSの不透明度CSSの色値