opacity関数

opacity関数は、 背景画像の透明度を変更することができます。 値100%または1は、 画像の元の透明度を維持します。 値0は、 画像が完全に透明になることを意味します。 この範囲内の任意の数値は、背景の部分的な透明度を設定します。 負の値を設定することはできません。 デフォルト値は1です。

構文

cssセレクタ {
  filter: opacity(数値);
}

例

画像の透明度を50%に設定してみましょう：

html<div id="elem"></div>

css#elem {
  filter: opacity(50%);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

今度は透明度を100%に設定してみましょう：

html<div id="elem"></div>

css#elem {
  filter: opacity(100%);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

今度はopacity関数に0に等しい値を設定してみましょう：

html<div id="elem"></div>

css#elem {
  filter: opacity(0);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

関連項目