トップページ > 便利な小技 > 透明度の設定

CSSレイアウト[便利な小技]

透明度の設定

[注意] 透明度を指定するCSSはモダンブラウザのみ表示可。
オールドブラウザは対応していないので透明度は変えられない。

下の5つの写真は、CSSを使って透明度を10％、25％、50％、75％、100％と変えている。

10%

25%

50%

75%

100%

これを使えば下のように、写真の上に重ねた文字に透明度を指定することが出来る。
この「FLOWERS」の文字はHTML上でタイプした文字。文字の透明度は50％。
この手法でカテゴリータイトル等を作れば、写真を加工することなく、テキストを交換出来る。
（この↓文字の透明化は、WINのIE6には非対応。FireFoxなどで確認してください。）
FLOWERS
また、透明度を使ったロールオーバーボタンも出来る。
このボタンは、通常時は透明度60％、ロールオーバーで100％に指定している。
透明度の指定のしかた
書きかたはブラウザによって異なる。
/* 75％に指定する場合 */
filter: alpha ( opacity=75 ) ; ←IE用。100が100％
-moz-opacity: 0.75 ; ←FireFox, NN用。1が100％
opacity: 0.75 ; ←Opera, Safari用。1が100％
上で紹介した、透明度を使ったロールオーバーボタンのCSSは下記の通り。
#sample .mainmenu h4 {
float: left;
}
#sample .mainmenu h4 a {
height: 25px;
width: 100px;
text-indent: -9999px;
display: block;
background: url(../img/swapbtn.gif) no-repeat 0px 0px;
filter: alpha(opacity=60); ←ロールアウト時は透明度60％に指定
-moz-opacity: 0.60;
opacity: 0.60;
}
#sample .mainmenu h4#menu1 a {
background-position: 0px 0px;
}
#sample .mainmenu h4#menu2 a {
background-position: -100px 0px;
}
#sample .mainmenu h4#menu3 a {
background-position: -200px 0px;
}
#sample .mainmenu h4#menu4 a {
background-position: -300px 0px;
}
#sample .mainmenu h4#menu1 a:hover {
filter: alpha(opacity=100); ←ボタンにロールオーバーすると100％
-moz-opacity: 1.00;
opacity: 1.00;
}
#sample .mainmenu h4#menu2 a:hover {
filter: alpha(opacity=100);
-moz-opacity: 1.00;
opacity: 1.00;
}
#sample .mainmenu h4#menu3 a:hover {
filter: alpha(opacity=100);
-moz-opacity: 1.00;
opacity: 1.00;
}
#sample .mainmenu h4#menu4 a:hover {
filter: alpha(opacity=100);
-moz-opacity: 1.00;
opacity: 1.00;
}
ロールオーバーボタンのHTMLは下記の通り。
<div id="sample">
<div class="mainmenu">
<h4 id="menu1"><a href="#">NEWS</a></h4>
<h4 id="menu2"><a href="#">SHOP</a></h4>
<h4 id="menu3"><a href="#">STAFF</a></h4>
<h4 id="menu4"><a href="#">ACCESS</a></h4>
<div class="c-both"></div>
</div><!-- END mainmenu-->
</div><!-- END sample-->
ページの最上部へ