目次 | opacityとは |
opacityの1 / 0.8 / 0.6 / 0.4/ 0.2 / 0.0 |
opacityとは
opacityは、透明度を指定します。
書き方 | opacity : 値 |
数値 | 0.0から1.0までを指定します。 0.0が透明の値で、1.0が不透明の値です。 背景色と文字ともに透明になるほど背景が透けて見えるようになります。 opacityは、不透明度という意味です。 |
初期値 | 1.0 |
継承 | なし |
参考(MDN) | https://developer.mozilla.org/ja/docs/Web/CSS/opacity |
opacityの1
offset-x
<style>
.test1 {
opacity: 1;
background: #e0ffff;
width: 200px;
}
</style>
<body>
<div class="test1">offset-x</div>
</body>
opacityの0.8
offset-x
<style>
.test2 {
opacity: 0.8;
background: #e0ffff;
width: 200px;
}
</style>
<body>
<div class="test2">offset-x</div>
</body>
opacityの0.6
offset-x
<style>
.test3 {
opacity: 0.6;
background: #e0ffff;
width: 200px;
}
</style>
<body>
<div class="test3">offset-x</div>
</body>
opacityの0.4
offset-x
<style>
.test4 {
opacity: 0.4;
background: #e0ffff;
width: 200px;
}
</style>
<body>
<div class="test4">offset-x</div>
</body>
opacityの0.2
offset-x
<style>
.test5 {
opacity: 0.2;
background: #e0ffff;
width: 200px;
}
</style>
<body>
<div class="test5">offset-x</div>
</body>
opacityの0
offset-x
<style>
.test6 {
opacity: 0;
background: #e0ffff;
width: 200px;
}
</style>
<body>
<div class="test6">offset-x</div>
</body>
opacity 0.0を指定しています。透明のため見えなくなっています。
関連の記事