スタイルシートリファレンス > filter: alpha()

スタイルシートリファレンス filter: alpha()


filter: alpha() 透明・半透明・グラデーションにする (IE4)

画像やテキストを透明・半透明・グラデーションにします。

<span><div>タグで使用する場合は、width, height を指定するか、position で absolute を指定します。

Opacity
開始透明度を、0(透明)〜100(不透明)の範囲で指定
FinishOpacity
終了透明度を、0(透明)〜100(不透明)の範囲で指定
style
0指定なし 1線形 2円形 3長方形

グラデーションは、Opacity FinishOpacity の範囲でかけます。

▲ページ先頭へ

使用例 filter: alpha()

HTMLソース

<html>
<head>
<title>CSS テスト</title>
<style type="text/css">
<!--
.img1 {
filter: Alpha(Opacity=20);
}
.img2 {
filter: Alpha(Opacity=100,FinishOpacity=0,style=2);
}
.box {
width:150px;
height:100px;
background-color:#00ff00;
filter: Alpha(Opacity=100,FinishOpacity=0,style=3);
}
marquee {
color: #ff0000;
filter: Alpha(Opacity=100,FinishOpacity=0,style=2);
}
hr {
border:solid 1px #0000ff;
filter: Alpha(Opacity=100,FinishOpacity=0,style=1);
}
-->
</style>
</head>
<body>
<img src="sample.gif" class="img1">
<br>
<img src="sample.gif" class="img2">
<br>
<div class="box"></div>
<br>
<marquee></marquee>
<br>
<hr>
</body>
</html>

▲ページ先頭へ

ブラウザ上の表示

画像を半透明 Opacity=20

画像を半透明

画像にグラデーション style=2 円形

画像にグラデーション

ボックスにグラデーション style=3 長方形

<marquee>にグラデーション style=2 円形

マーキーにグラデーション

<hr>にグラデーション style=1 線形




▲ページ先頭へ

関連項目【フィルタ・効果】

filter: alpha()
透明・半透明・グラデーションにする (IE4)
filter: mask()
透明部分を塗りつぶし不透明部分を透明にする (IE4)
filter: chroma()
特定の色を透明にする (IE4)
filter: dropshadow()
影をつける (IE4)
filter: shadow()
立体的な影をつける (IE4)
filter: glow()
文字の周りに効果をつける (IE4)
filter: fliph()
左右反転にする (IE4)
filter: flipv()
上下反転にする (IE4)
filter: blur()
画像やテキストをブレさせる (IE4)
filter: wave()
画像やテキストを波状にする (IE4)
filter: invert()
階調を反転させる (IE4)
filter: gray()
グレイスケールにする (IE4)
filter: xray()
階調を反転してグレイスケールにする (IE4)
filter: light()
ライティング効果にする (IE4)
zoom
拡大・縮小表示する (IE55)

▲ページ先頭へ

スタイルシートリファレンス > filter: alpha()