「日記はいつも三日坊主。」
ブログの使い方やCSSを勉強していましたが休止中です。
コメント欄・トラックバックの怪しげなURLにはご注意ください。
(たまーにスパムのチェックはしますが消しきれませんのでm(_ _)m)
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
最近の記事
10/15 半透明フィルターの代わりに…
10/12 エキサイトブログ・モバイル…
9/19 スキン編集 ―背景編― 改訂版
9/17 コメント入力欄を大きくする。
9/14 アクセス解析について その1
9/7 POSTTAILの自分のIDを消して…
9/3 模様替えしました。&スクロールバー
9/1 いくら三日坊主といっても
全体 ブログ MENU スキン
編集
素材
配布
日記 リンク 管理用 ・・・ ・・・
半透明フィルターの代わりに半透明画像を使ってNNに対応
前に書いた記事をだいぶ経ってから読みなおすと自分でも読んでて混乱したので書きなおしてみました。(10/15)

背景に画像を使った場合、淡い色目ならそのままでいいのですが、ハッキリした柄や写真等だとその上に書く文字や画像が読みづらくなります。
そこでよく使われるのが文字を書く部分の背景に色指定をし、それに半透明のフィルターをかける方法です。

しかし、フィルター(filter:alpha)で指定すると文字だけでなく画像も半透明になってしまいます。
更にフィルター指定はIE4.0以降でしか反映されないのでNNなどのブラウザだと何も処理しないのと同じになるのですね。これが困りものです。


そこで透過画像を使って背景だけを半透明にしてみました。下の画像で見比べてみてください。
※見本を画像にしたら透過背景に線が入ってしまいましたが実際には入りません。
c0029209_2251564.gif
左2つがフィルター処理。真中が何もしない状態。右2つが透過背景を使った状態です。
文字や画像の透け具合を比べると透過背景のほうが見やすくないですか?

透過背景指定はHTML編集でもCSS編集でもできます。

●HTMLで指定する場合の例
<table background="背景画像のURL">
<tr>
<td background="透過画像のURL">文字はここ</td>
</tr>
</table>


●CSSで指定する場合の例
DIV.HAIKEI{
BACKGROUND-IMAGE:URL("背景画像のURL");
}
DIV.TOUKA{
BACKGROUND-IMAGE:URL(透過画像のURL);
}


<div class="HAIKEI">
<div class="TOUKA">文字はここ</div>
</div>


c0029209_23242491.gif
※見本を画像にしたら透過背景に線が入ってしまいましたが実際には入りません。
上のように背景の画像の色や透過画像の色、文字の色によってはかえって見づらくなったり文字がつぶれたりしますので、そのへんは色々思考錯誤してやってみてくださいネ。


その他使用例は自作スキンver.3-2ver.4にもあります

透過背景用素材はこちらで配布しています。(現在白のみ)

追記:Mozilla、NNでも透過が出来る方法があるそうです。
crossmoon2 さんの「背景を透過する(Mozilla・NN) 」へどうぞ。
[PR]
by umigasuki70 | 2005-05-13 23:34 | スキン編集記