CSS opacity| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
ページコンテンツ
opacity CSS プロパティとは
トピック：要素の透明度を指定する ことができる opacityは透明度レベルを表する0.1は透明ではなく、0.5は50％のシースルー、0は完全に透明です。
プロパティ opacity
実例 コード 1
要素の不透明度を設定する
サンプル コードを試す div {
opacity: 0.5;
}- 使用上の注意：
opacityプロパティを使用して要素の背景に透明度を追加すると、その子要素もすべて透明になるこれにより、完全に透明な要素内のテキストを読みにくくすることができる。子要素に不透明度を適用したくない場合は、代わりにRGBAカラー値を使用
プロパティ 定義と使用法
| デフォルト値・初期値 : | 1.0 |
|---|---|
| 適用対象 : | 全要素 |
| 継承 : | 不可 |
| メディア : | visual |
| 計算値 : | 指定値。[0,1] の範囲内にクリップされます |
CSS Version | CSS3 |
| Animation type : | number |
| JavaScript 構文 | object.style.opacity="0.5" |
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
| CSSの構文 | opacity: number |initial |inherit; |
プロパティ値
| 値 | 説明 |
|---|---|
number | 不透明度を指定する 0.0（完全に透明）から1.0（完全に不透明） |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
HTMLコード：例
サンプル コードを試すopacity:0.2;
/* 不透明度レベル 0.2 表示する*/
- 不透明度 0.2
不透明度 1（デフォルト）
サポートするデスクトップ ブラウザ対応・互換性
| 機能 | Chrome | Firefox | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | 1.0 (1.7 or earlier) | 9.0 8.0 4.0 | 9.0 | 1.2 (125) |
サポートするモバイル ブラウザ対応・互換性
| 機能 | Android | Firefox Mobile | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | 1.0 (1.7) | 9.0 8.0 4.0 | 9.0 | 3.2 |
