画像を半透明にする方法、すける画像の作り方です。今回はこの画像をサンプルにします。
【即日発送】エレガントモーメント/ペアでパイロット&スチュワーデスなりきりコスチューム/ランジェリーセット 在庫限り最終処分セール EM7790
presented by amazon
これを加工してこんな感じにします。この程度の加工に 画像編集ソフトは不要 です。
上の画像の実現方法
まず、背景を用意します
この上に、次のように半透明になったスケスケ画像を載せます
完成
ソースコード
<style type="text/css"> p. sample { opacity:0.5; filter:alpha(opacity=50); /* InternetExplorer用 */ margin:0; padding:0; } </style> <table style="margin:0;width:380px;border:none"> <tr> <td style="border:0"> <div style="background:#f00;width: 177px ;height: 250px ;padding:0"> <p class=" sample "><img border="0" src="URL" width=" 177 " height=" 250 " /></p> </div> </td> <td style="border:0"> <div style="background:#00f;width: 177px ;height: 250px ;padding:0"> <p class=" sample "><img border="0" src="URL" width=" 177 " height=" 250 " /></p> </div> </td> </tr> </table>
以前「 で、スタイルシートはどこに書くのか？ 」というエントリーでスタイルシートを書ける場所は３カ所と書きましたが、実はbodyタグの中にも書けます。
bodyタグの中に書く場合も、最初と最後を <style type="text/css"> と </style> で囲みます。
opacity というのが、透過を指示するスタイルで、0だと完全な透明、1だと完全に見えている状態。その間で透過度を出します。上の例では50パーセントの見え具合で50パーセント透けている状態です。
ただし、InternetExplorerはopacityに対応していません。その代わり、 filter という機能でopacityと同じことができます。その場合は0から100までの数値で指定します。0だと完全な透明、100だと完全に見えている状態です。
空タグを気にしないなら、画像を１００%で背景にして、その上に半透過の色を乗せた方がキレイかもしれません。
ただし、背景画像として使う場合は画像のサイズを変更できません。今回の画像は、実際には横幅1060ピクセル、高さ1500ピクセルあるのを縮小して使っているので背景にせず、透かして使いました。
試していませんが、画像を透過せず背景として使い、透過した色を載せる場合は下のようなコードになります。
<style type="text/css">
div.background{
background:url('画像のURL');
width:177px;
height:250px;
padding:0
}
p.sample{
opacity:0.5;
filter:alpha(opacity=50); /* InternetExplorer用 */
width:100%;
height:100%;
}
</style>
<table style="margin:0;width:380px;border:none">
<tr>
<td style="border:0">
<div class="background">
<div class="sample" style="color:#f00;"></div>
</div>
</td>
<td style="border:0">
<div class="background">
<div class="sample" style="color:#00f;"></div>
</div>
</td>
</tr>
</table>
上のコードは、見ての通り空っぽです。画像が背景のdivタグの中に、色が背景のdivタグが入っているだけです。恐らく、これで１００パーセント不透過の画像に色がかかったものが表示されますが、HTML的には全く中身のないものなので、GoogleやYahoo!には嫌われるでしょう。あとは状況に応じて使ってください。
おまけ
こういう画像が背景のところに文章を書くと非常に見づらいです。そんな時は背景を変えるのが、いちばんいいのですが、それでも使いたい場合の対処法です。このように半透明の色をつければすこし見やすくなります。
でも、まだ見づらいので文字を太くしてみました。
ただし、この方法には致命的な欠陥があります。実は今見ている、この文字も薄くなっているのです。
文字が透けずに、背景の色だけ透かすには、本当に透けている色のついた画像を用意する必要があります。
それについては今回は扱いません。以上、「透ける画像」でした。
この画像は「 みかんの部屋 」から借りてきました
