文字・画像などを半透明にする

プロパティ　filter:
フィルタ名　alpha(属性値);
属性値　opacity=0〜100

スタイルシートで文字や画像などにフィルタ効果を使うにはfilterプロパティを使います。

次にフィルタ名でフィルタの効果を指定します。そして属性値で詳しい値の設定をします。

たくさん属性値を書くときは ,(カンマ) でくぎります。

今回は半透明フィルタですのでalphaを指定します。

次に属性opacityで透明度を指定します。値は0〜100までで0が透明、100が不透明です。

またフィルタ効果は<span>タグやdivタグなどに直接指定する場合、

必ずwidth属性もしくはheight属性をつけて大きさを指定する、

または画像の操作の場所で出てきたposition:absolute;を指定しておく必要があります。

個別にスタイルを指定する場合以外は大きさの指定は必要ありません。

ブラウザにFirefoxを使っているとフィルター効果が現れませんのでご注意ください。

表示例

文字が半透明になっています。色も指定できます。

ソース

<span style="width:100%; color:blue; filter:alpha(opacity=50);"> 文字が半透明になっています。色も指定できます。 </span> <span style="width:100%; filter:alpha(opacity=50);"> <img src="cat.gif"> </span>

＜＜　段落の操作の「段落を縦書きにする」へ　　　　「ぼかしフィルタ」へ　＞＞



ホームページ作成とHTML＞＞スタイルシートの書き方講座＞＞文字・画像などを半透明にする