画像の特殊効果スタイルシート具体例
画像の特殊効果に関してのスタイシートの具体的な書き方です。
スタイルシートだけで画像や文字を半透明にしたり、更にそれをぼかしたりします。

損をしない自動車保険選び損をしないクレジットカード選び銀行の利用就職・アルバイト情報
TOPページに戻る   文字サイズを変えるには Control キーを押しながらマウスのスクロールホイールを回してください
画像の特殊効果に関してのスタイルシート具体例       ▲
ネットスケープナビゲーターでは効果は出ません
画像を半透明に
filter: alpha(opacity=数値);
数値は透明度を表し 0 では完全な透明になります。100はそのままの画像表示です。
<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">
<!--
IMG{ filter: alpha(opacity=40);}  
-->
</STYLE>
</HEAD>
<BODY> <IMG src="cat1.jpg">
</BODY></HTML>
<HTML><HEAD><TITLE>　　</TITLE>
</HEAD>
<BODY> <IMG src="cat1.jpg" style="filter: alpha(opacity=40);">
</BODY></HTML>

半透明にし、ぼかす・その1
filter: alpha(opacity=数値 style=数値);
フィルターのかけ方も指定できます。 filter: alpha(opacity=40 style=1) と、style=数字　を追加します。
スタイル指定をしないと上のように均一にフィルターがかかりますが、 style=1 では下のように線形にかかります。
<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">
<!--
IMG{ filter: alpha(opacity=60 style=1);}  
-->
</STYLE>
</HEAD>
<BODY> <IMG src="cat1.jpg">
</BODY></HTML>
<HTML><HEAD><TITLE>　　</TITLE>
</HEAD>
<BODY> <IMG src="cat1.jpg" style="filter: alpha(opacity=60 style=1);">
</BODY></HTML>
上に戻る
半透明にし、ぼかす・その2
filter: alpha(opacity=60 style=2);
style=2 では下のように円形にフィルターがかかります。
<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">
<!--
IMG{ filter: alpha(opacity=60 style=2);}  
-->
</STYLE>
</HEAD>
<BODY> <IMG src="cat1.jpg">
</BODY></HTML>
<HTML><HEAD><TITLE>　　</TITLE>
</HEAD>
<BODY> <IMG src="cat1.jpg" style="filter: alpha(opacity=60 style=2);">
</BODY></HTML>


半透明にし、ぼかす・その3
filter: alpha(opacity=60 style=3);
style=3 では下左のように長方形にフィルターがかかります。
<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">
<!--
IMG{ filter: alpha(opacity=60 style=3);}  
-->
</STYLE>
</HEAD>
<BODY> <IMG src="cat1.jpg">
</BODY></HTML>
<HTML><HEAD><TITLE>　　</TITLE>
</HEAD>
<BODY> <IMG src="cat1.jpg" style="filter: alpha(opacity=60 style=3);">
</BODY></HTML>


文章を半透明に
position: absolute; filter: alpha(opacity=数値);
文章も半透明にできます。
position: absolute; filter: alpha(opacity=数字) のように、 position: absolute;を追加し、文章の半透明にしたい部分を<DIV>で括ります。 後は画像とまったく同じです。
<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">
<!--
DIV{ width:400px; position: absolute;filter: alpha(opacity=40);}  
-->
</STYLE>
</HEAD>
<BODY> <DIV>テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV>
</BODY></HTML>
<HTML><HEAD><TITLE>　　</TITLE>
</HEAD>
<BODY>
<DIV style="width:400px; position: absolute;filter: alpha(opacity=40);">テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV>
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。






上に戻る TOPページに戻る 前に戻る 順番に次を見ていく