1. TOP
  2. html&CSS入門
  3. cssのopacityを使って透明度を操作する方法を解説

cssのopacityを使って透明度を操作する方法を解説

opacityプロパティを使うと、要素の不透明度を指定することができます。

opacity:値

値は、0.0〜1.0までの数値か、inheritを指定します。

  • 数値で指定
    0.0が完全な透明、1.0が完全な不透明です。
  • inherit
    inheritを使った場合は親要素の値が継承されます。

例をみてみましょう。

 <div id="demo_229">
   <p id="demo_229-1">opacity0.0です</p>
   <p id="demo_229-2">opacity0.2です</p>
   <p id="demo_229-3">opacity0.4です</p>
   <p id="demo_229-4">opacity0.6です</p>
   <p id="demo_229-5">opacity0.8です</p>
   <p id="demo_229-6">opacity1.0です</p>
 </div>
#demo_229-1{
   opacity: 0.0;
 }
 #demo_229-2{
   opacity: 0.2;
 }
 #demo_229-3{
   opacity: 0.4;
 }
 #demo_229-4{
   opacity: 0.6;
 }
 #demo_229-5{
   opacity: 0.8;
 }
 #demo_229-6{
   opacity: 1.0;
 }
 
 /* 親要素のスタイル*/
 #demo_229{
   background-color: royalblue;
   padding: 10px;
 }
 
 /* 共通スタイル */
 #demo_229 p{
   width: 200px;
   padding: 5px;
   background-color: tomato;
 }

opacity0.0です

opacity0.2です

opacity0.4です

opacity0.6です

opacity0.8です

opacity1.0です

opacityが0.0は完全な透明になるので表示されていませんが、opacityの数値を上げていくと、透明度も変わっていくのが分かります。

opacityの注意点

opacityは子要素も、文字も、背景色も、ボーダーも全部含めた要素全体の不透明度を変えるプロパティです。

例えば親要素にopacityで0.5が設定されていると、子要素でopacityを1にしても、結果はかわらず半透明で表示されます。

これは、子要素を含めた要素全体が半透明になっているからです。もちろん、文字もボーダーも全て半透明になります。

要素全体ではなく、一部分だけ個別に透明度を指定したい場合は、rgba()を使いましょう。

opacityの使い方

opacityの使い方を、実例を通して解説していきます。

ホバーすると半透明になるボタン

よく見かける、ホバーすると半透明になるボタンを実装してみましょう。

 <a href="" id="demo_230">
   ホバーで半透明になるボタン
 </a>
/* ボタンの装飾 */
 #demo_230{
   
   /*   徐々に透明にするための設定*/
   transition: 0.5s;
   
   /*   以下装飾 */
   display: inline-block;
   background-color: tomato;
   padding: 20px;
   border-radius:50px;
   text-decoration: none;
   color: white;
 }
 
 /* ホバー時の装飾*/
 #demo_230:hover{
   opacity:0.7;
 }

ホバー時のスタイルを設定するには、

セレクタ:hover{

という書き方をします。今回はここでopacityを指定しているので、ホバーすると少し透明になります。

また、transitionを設定して徐々に半透明になるように設定しています。

transitionはゆっくり変化させることが出来るプロパティで、これを使うとフワーッと透明度が変わるスタイルなどを簡単に適用することができます。

まとめ

  • opacityプロパティを使うと、要素の不透明度を指定することができる
  • 0.0で完全な透明、1.0で完全な不透明になる
  • opacityは子要素も、文字も、背景色も、ボーダーも全部含めた要素全体が透明になる