opacityとrgbaの指定について

Webデザイン

透明度を指定するにはopacityとrgbaを使う方法があります。

opacityは全体の透明度の指定ができます。
透明度は子要素にも引き継がれます。

rgbaはcolorやbackgroundなどの要素に指定します。

値は、同じく
0  〜  1
透明  不透明
で指定します。
小数点での指定が可能です。

例:

body { background:#ccc; }
.modA,
.modB,
.modC {
height: 50px;
margin: 0 10px 20px;
background: #f60;
padding: 10px;
text-align: center;
font-size: 40px;
color: #fff;
}
.modB {
opacity: 0.5;
}
.modC {
background: rgba(255,153,0,0.5);
color: rgba(255,255,255,0.5);
}

img01_201202.png

便利ツール発見です
rgb ←→ 16進数 にできます
http://www.kitaq.net/lib/rgb/

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です