スポンサーリンク
画像を半透明にする方法、すける画像の作り方です。今回はこの画像をサンプルにします。
【即日発送】エレガントモーメント/ペアでパイロット&スチュワーデスなりきりコスチューム/ランジェリーセット 在庫限り最終処分セール 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>
以前「で、スタイルシートはどこに書くのか?」というエントリーでスタイルシートを書ける場所は3カ所と書きましたが、実はbodyタグの中にも書けます。
bodyタグの中に書く場合も、最初と最後を<style type=”text/css”>と</style>で囲みます。
opacityというのが、透過を指示するスタイルで、0だと完全な透明、1だと完全に見えている状態。その間で透過度を出します。上の例では50パーセントの見え具合で50パーセント透けている状態です。
ただし、InternetExplorerはopacityに対応していません。その代わり、filterという機能でopacityと同じことができます。その場合は0から100までの数値で指定します。0だと完全な透明、100だと完全に見えている状態です。
空タグを気にしないなら、画像を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タグが入っているだけです。恐らく、これで100パーセント不透過の画像に色がかかったものが表示されますが、HTML的には全く中身のないものなので、GoogleやYahoo!には嫌われるでしょう。
あとは状況に応じて使ってください。
おまけ
こういう画像が背景のところに文章を書くと非常に見づらいです。
そんな時は背景を変えるのが、いちばんいいのですが、それでも使いたい場合の対処法です。このように半透明の色をつければすこし見やすくなります。
でも、まだ見づらいので文字を太くしてみました。
ただし、この方法には致命的な欠陥があります。実は今見ている、この文字も薄くなっているのです。
文字が透けずに、背景の色だけ透かすには、本当に透けている色のついた画像を用意する必要があります。
それについては今回は扱いません。以上、「透ける画像」でした。
この画像は「みかんの部屋」から借りてきました
関連コンテンツ
スポンサーリンク
こんばんわ。
どこにみかんの画像があるのか、探しちゃいました~
使用はもちろん 全然OKですよ。
花の絵などを背景にして 記事を書くとお洒落ですね。またチャレンジしたいと思います。
ヘッダーの画像と字の色には いつも悩んでいる事の一つです。
字の位置と 字の色が上手く良い場所になるように 考えいます。
TOMさんなら 自由に色々な事が出来て うらやましいわ。
実は TOPのヘッダーは全体にリンクが出来るように出来ましたが、
他の記事では まだ出来ないの・・(;_;)
説明してくださった方もいるのですが、理解が出来なくて・・
他のページもヘッダー全体にリンクが出来るようになれば 画像にみかんの部屋と大きく書けるから 字の場所とか色に悩まなくて済むのですが・・
こんばんわ。
説明が下手ですみませんm(__)m
そうです ヘッダー全体ににTOPに行くように リンクしたかったのです。
TOMさんの書いていたとおりにできましたが、
スタイルシートは 以前 他の方に教えていただいて もう修正してあるので TOPだけは 画像全部にリンクができています。
TOMさんのソースを加えると 画像のレイアウトが崩れてしまうので いじらなでおきました。
1記事は タグを追加して 出来ました\(^o^)/
ありがとうございました。
凄く ずうずうしいのですが、・・マウスのかたちが 手のかたちに 出来ないのでしょうか?・・m(__)m
cursor:pointer; が手の形ですが。
ヘッダーの画面全部に 手の形にならないのですが・・??
スタイルシートには
/* ロゴ設定 */
.logo {
background:transparent url(‘http://fanblogs.jp/mikannoheya/file/515/Q0c3MTAyVfo.png’) no-repeat scroll 0 0;
display:block;
height:185px;
left: -108px;
overflow: hidden;
position: relative;
text-indent:-9999px;
top:-65px;
width:914px;
}
が入っているので みかんの部屋と字が見えなくなり、
ヘッダーの画像全体にTOPにリンクが貼られています。
1記事やプロフィールもこれをやりたいのです。
だから、書いて送ったとおりの場所に
cursor:pointer;
を入れろといっています。
今確認しましたが、みかんさんはそれを入れてないですよね。
意味分かってやってます?
こちらは、確実に動くのをテストしてソースを送っているのに
その通りに書き込まず、できないといわれても、対処できません。
出来ました・・
最初ためした時にロゴとヘッダーの背景の絵がずれていたように 見えたので 意味がわからず
スタイルシートには 入れていませんでした・・
まだ 出来ていませんが、いずれは タイトルも自分の字を入れた ロゴを作りたいと思っていたので、すべての記事やプロフィールにも 全体にリンクが出来るようにしたいと 思っていました。
お忙しい所 お手数かけました・・m(__)m
ロゴができたらタイトル文字はいらなくなると思いますが、その時は
<h1 id=”blogTitle” style=”display:none”><a href=”http://fanblogs.jp/mikannoheya/”>みかんの部屋</a></h1>
<div id=”blogDesc” style=”display:none”>オートシェイプ・JTrimで写真加工をして遊んでいます。また、家に咲く花・ちょっとしたお勧めを紹介しています。</div>
で消えます。
ただ、状況が分からないので、ロゴに差し替える時また聞いてください。