トップページ > スタイルシートリファレンス > filter > Alpha()

★スタイルシートリファレンス

filter:progid:DXImageTransform.Microsoft.Alpha(必要な値) …… 透過表示にする(IE5.5以上)
Internet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9

filter:alpha(必要な値) …… 透過表示にする(IE4以上)
Internet Explorer4Internet Explorer5Internet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9
広告

filterプロパティのAlpha()は、透過表示にする際に使用します。

■値

Style=透過スタイル
0(透過無し)・1(線形)・2(円形)・3(長方形)で指定
Opacity=開始透明度
0(透明)~100(不透明)の範囲で指定(初期値は0)
FinishOpacity=終了透明度
0(透明)~100(不透明)の範囲で指定(初期値は0)
StartX=X座標
透過開始のX座標
StartY=Y座標
透過開始のY座標
FinishX=X座標
透過終了のX座標
FinishY=X座標
透過終了のX座標

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

p.sample1 img {
filter:progid:DXImageTransform.Microsoft.Alpha(Style=2,Opacity=100,FinishOpacity=0);
}
p.sample2 img {
filter:alpha(Style=2,Opacity=100,FinishOpacity=0);
}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p>
filterプロパティを適用していない画像<br>
<img src="images/kaeru.gif">
</p>
<p class="sample1">
フィルタ効果Alpha()<br>
<img src="images/kaeru.gif">
</p>
<p class="sample2">
フィルタ効果Alpha()<br>
<img src="images/kaeru.gif">
</p>
</body>
</html>
↓↓↓

ブラウザ上の表示

filterプロパティを適用していない画像

フィルタ効果Alpha()

フィルタ効果Alpha()

■関連項目

BasicImage() …… 透過・回転・反転・グレースケールなどを指定する
fliph() …… 左右反転する
flipv() …… 上下反転する
invert() …… 色(色相・明度・彩度)を反転する
xray() …… X線効果(グレースケールにして反転)を適用する
Alpha() …… 透過表示にする
Chroma() …… 特定の色を透明にする
MaskFilter() …… 指定した色でマスクをかける
Glow() …… 背後から光を当てたような効果を与える
DropShadow() …… ぼかしのない影をつける
Shadow() …… ぼかしのある影をつける
Blur() …… ぼかす
MotionBlur() / blur() …… 方向を指定してぶれさせる
Wave() …… 波状に歪めて表示する
Pixelate() …… モザイク表示にする
Emboss() …… 浮き彫り表示(エンボス)にする
Engrave() …… 彫り込み表示(エングレーブ)にする
Matrix() …… 二次元面を傾けたような表示にする
Gradient() …… 背景と内容の間にグラデーションの面を表示する
zoom …… 拡大・縮小表示する(IE独自の仕様)
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ