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