コンテンツを透明にしたいときに使うopacityプロパティ

2015年6月24日

このプロパティはコンテンツの透明度を設定することができます。
透明度の表す数値は０~１．０で、０は完全に透明で１．０は
完全に不透明になります。

    *{margin:0;padding:0;}
    
    #container{
        width:400px;    
        height:400px;
        background-color:#f0f0f0;
        margin:0 auto;
    }
    .box{
        width:50px;
        height:50px;
        background-color:green;
    }
    .opacity10{opacity:1.0;}
    .opacity09{opacity:0.9;}
    .opacity08{opacity:0.8;}
    .opacity07{opacity:0.7;}
    .opacity06{opacity:0.6;}
    .opacity05{opacity:0.5;}
    .opacity04{opacity:0.4;}
    .opacity03{opacity:0.3;}
    .opacity02{opacity:0.2;}
    .opacity01{opacity:0.1;}
    .opacity00{opacity:0.0;}

*{margin:0;padding:0;}

#container{

width:400px;

height:400px;

background-color:#f0f0f0;

margin:0 auto;

}

.box{

width:50px;

height:50px;

background-color:green;

}

.opacity10{opacity:1.0;}

.opacity09{opacity:0.9;}

.opacity08{opacity:0.8;}

.opacity07{opacity:0.7;}

.opacity06{opacity:0.6;}

.opacity05{opacity:0.5;}

.opacity04{opacity:0.4;}

.opacity03{opacity:0.3;}

.opacity02{opacity:0.2;}

.opacity01{opacity:0.1;}

.opacity00{opacity:0.0;}

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTMLのメモ</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <p>opacityプロパティのテスト</p>
    <div class="box opacity10">1.0</div>
    <div class="box opacity09">0.9</div>
    <div class="box opacity08">0.8</div>
    <div class="box opacity07">0.7</div>
    <div class="box opacity06">0.6</div>
    <div class="box opacity05">0.5</div>
    <div class="box opacity04">0.4</div>
    <div class="box opacity03">0.3</div>
    <div class="box opacity02">0.2</div>
    <div class="box opacity01">0.1</div>
    <div class="box opacity00">0.0</div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>HTMLのメモ</title>

</head>

<body>

<p>opacityプロパティのテスト</p>

</body>

</html>