<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #4CAF50;
padding: 10px;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>透明な箱</h1>
<p>opacityプロパティを使用して要素の背景に透明度を追加すると、その子要素もすべて透明になります。このため、完全に透明な要素内のテキストが読みにくくなることがあります。</p>
