CSS - opacity

概要

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

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS39.01.01.09.01.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

関連項目

color, opacity

リンク

Copyright (C) 1997-2015 杜甫々
初版：1997年7月27日、最終更新：2015年11月22日
https://www.tohoho-web.com/css/prop/opacity.htm