CSS - opacity

概要

属性名	opacity
値	<alphavalue> \| inherit
初期値	1
適用可能要素	すべての要素
継承	継承しない
メディア	visual
アニメーション	可能

サポート (説明)

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS3	9.0	1.0	1.0	9.0	1.2

説明

透明度を指定します。半透明の画像や文字を表示することができます。

値	説明
<alphavalue>	透明度を、0.0(透明)～1.0(不透明)の数値で指定します。
inherit	親要素の値を継承します。inherit を参照してください。

使用例

CSS

.example {
  position: relative;
  height: 70px;
  width: 70px;
  border:1px solid #999;
  margin: 1em;
}
.example div {
  position: absolute;
  top: 20px;
  left: 20px;
  height: 40px;
  width: 40px;
  border:1px solid #999;
  background-color: #f00;
}
.example img {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 40px;
  width: 40px;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-70 {
  opacity: 0.7;
}

HTML

<h5>opacity=0.3</h5>
<div class="example">
  <img src="../image/back.gif">
  <div class="opacity-30"></div>
</div>

<h5>opacity=0.5</h5>
<div class="example">
  <img src="../image/back.gif">
  <div class="opacity-50"></div>
</div>

<h5>opacity=0.7</h5>
<div class="example">
  <img src="../image/back.gif">
  <div class="opacity-70"></div>
</div>

表示

opacity=0.3

opacity=0.5

opacity=0.7

リンク

初版：1997年7月27日、最終更新：2015年11月22日

https://www.tohoho-web.com/css/prop/opacity.htm

CSS - opacity

概要

サポート (説明)

説明

使用例

opacity=0.3

opacity=0.5

opacity=0.7

関連項目

リンク