MotoJapan's Tech-Memo

技術めも

【CSS】半透明(透明度)の設定方法 【お家IT#14】

本件の実装の一部  
motojapan.hateblo.jp

前回の続き  
motojapan.hateblo.jp

目次


前回は、レイアウトの重ね合わせを実装した。
今回は、ボタンの透過度を設定したい。

完成イメージ

前回からの続きだが、ボタンが透過して下レイヤーの映像をスルーするようにしたい。
f:id:motojapan:20171029201448p:plain

実装

opacityで設定することができる。
前回までに追記。

.my_btn{
    …
    background: #668ad8;
    opacity: 0.8; /*0-1の範囲で不透明度を設定*/
    …
}

結果

f:id:motojapan:20171029200413j:plain

以上。

次回はなんとなく使っていたCSSの接頭句についてまとめる。