Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームHTMLリファレンス(アルファベット検索)>alpha フィルタ

CSSプロパティ辞典
タグ一覧(ABC順) 目的別タグ一覧 スタイルシート一覧(ABC順) 目的別スタイルシート一覧

alpha フィルタ …半透明にする

使用プロパティ

CSSプロパティ

filter: alpha(属性=値);

対象となる
要素

すべて

継承

しない

次項(属性、値とその効果)を参照してください。

対応ブラウザ IE6 Win

解説

alpha フィルタを使えば、要素を半透明にすることができます。

[ 複数の属性値を指定する ]…カンマ「,」で区切ります。
書式→「filter: フィルタ名(属性=値,属性=値);」

[ メモ ]
filter プロパティを div 要素span 要素に使用する際には、width プロパティheight プロパティ要素の幅や高さを指定する必要があります。ですが、画像などのように幅や高さが決まっている要素には必要ありません。また、position プロパティで「absolute」を指定した要素に対しても必要ありません。

filter プロパティは Internet Explorer 独自のプロパティで、対応していないブラウザで表示すると表示が崩れる場合がありますので注意が必要です。

属性、値とその効果

属性 効果
style
(スタイル)
0、1、2、3のどれかを指定(0は全体、1は直線のグラデーション、2は放射線グラデーション、3は長方形グラデーション) グラデーションの形状
opacity
(オパシティー)
0(完全な透明)〜100(完全な不透明)までの整数 開始の不透明度
finishopacity
(フィニッシュオパシティー)
0(完全な透明)〜100(完全な不透明)までの整数 終了の不透明度
startx
(スタートエックス)
0〜(正の整数) 開始時のx座標(style属性の値が「1」のときのみ)
starty
(スタートワイ)
0〜(正の整数) 終了時のy座標(style属性の値が「1」のときのみ)
finishx
(フィニッシュエックス)
0〜(正の整数) 終了時のx座標(style属性の値が「1」のときのみ)
finishy
(フィニッシュワイ)
0〜(正の整数) 終了時のy座標(style属性の値が「1」のときのみ)

使用例

記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>

</head>

<!--ページの本文-->
<body>

<p>- 元の画像- <br>
<img src="logo.gif" width="172" height="60" alt="サンプル">
</p>

<p>-フィルタ使用後の画像-<br>
<img src="logo.gif" width="172" height="60" alt="サンプル" style="filter: alpha(style=1, opacity=0, finishopacity=100, startx=0, starty=0, finishx=172, finishy=60);">
</p>

</body>
</html>
↓
[ブラウザでの表示例]
HOME PAGE ZERO ガイド

- 元の画像-
サンプル

-フィルタ使用後の画像-
サンプル

関連情報ページ

ページトップへ

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

<TOP>

logo
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system