opacityプロパティは、不透明度を指定するプロパティになります。
opacityプロパティ
記法
.クラス名 {
opacity: 0.0〜1.0までの値;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>opacityプロパティ</title>
</head>
<body>
<p class="opacity1">opacity1</p>
<p class="opacity2">opacity0.9</p>
<p class="opacity3">opacity0.8</p>
<p class="opacity4">opacity0.7</p>
<p class="opacity5">opacity0.6</p>
<p class="opacity6">opacity0.5</p>
<p class="opacity7">opacity0.4</p>
<p class="opacity8">opacity0.3</p>
<p class="opacity9">opacity0.2</p>
<p class="opacity10">opacity0.1</p>
<p class="opacity11">opacity0</p>
</body>
</html>.opacity1 {
opacity: 1;
}
.opacity2 {
opacity: 0.9;
}
.opacity3 {
opacity: 0.8;
}
.opacity4 {
opacity: 0.7;
}
.opacity5 {
opacity: 0.6;
}
.opacity6 {
opacity: 0.5;
}
.opacity7 {
opacity: 0.4;
}
.opacity8 {
opacity: 0.3;
}
.opacity9 {
opacity: 0.2;
}
.opacity10 {
opacity: 0.1;
}
.opacity11 {
opacity: 0;
}出力結果
opacity1
opacity0.9
opacity0.8
opacity0.7
opacity0.6
opacity0.5
opacity0.4
opacity0.3
opacity0.2
opacity0.1
opacity0