Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

[CSS] CSSを使って半透明にする方法いろいろ

CSSで半透明

CSSで、背景や画像、文字を半透明にする方法です。重ねた背景を半透明、バナーボタンを半透明などなど。これを使えば、表現の幅が広がりますね!素材の制作の手間も省けます。

INDEX

rgbaを使って半透明にする

rgbaとは、R,G,Bの3原色に透明度のアルファを加えた色の指定の事です。

使用例:メニューをTopに固定して、スクロールするとコンテンツが透けて見える様にする時

CSSで半透明
header{
	background-color:rgba(255,255,254,0.8);}

255,255,254は色で、0.8は透明度の値です。

opacityを使って半透明にする

使用例:バナー等にマウスを乗せた際に画像等を半透明にする時

CSSで半透明
a:hover img {
    opacity: 0.7;}

半透明じゃなくて、完全に透明にする

おまけ的情報です。どんな時に使用するのか、例題が浮かびませんが iframe(インラインフレーム)とか背景が重なる状況の時??には、
background: transparent とします。

\この記事がお役にたったら/

広告を減らしサイトを見やすくする予定です

cocotiieの運営をサポートして頂ければ嬉しいです

「金額を入力」で1円から入力できます

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX