• 締切
  • すぐに回答を!

HTML・CSS・背景画像半透明化

  • 質問No.5296429
  • 閲覧数1927
  • ありがとう数4
  • 回答数2

お礼率 100% (2/2)

body背景画像を活かしつつ、もう一枚の画像を前に持ってきて、透けさる
方法

皆様お忙しい中、申し訳ございません。
今、ホームページを作成中でして、body背景に画像を持ってきて、その上に
文章を持ってきたら文章がはっきりしないので、背景画像を活かしつつ文章の前に半透明化の#000000を70%位の濃さで残し、これはたぶんFLASHだと思いますが、この様な感じで、(黒い透けた真ん中画像)
http://store.honeyee.com/製作したいと思っております。
(HTML、CSSで)
CSSではこの様な形でやってみたんですが、bodyより上の画像がすべてすけてしまいレイアウトできませんでした。
filter:alpha(opacity=43);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
GIF、PNGの文字周りの透過ではなく一枚のイメージの透過を教えて
下さい。
宜しくお願い致します。

回答 (全2件)

  • 回答No.2

ベストアンサー率 34% (944/2776)

そのcssの適用範囲がよくわからないけれど、それを画像だけに限定すると良いんじゃない?

imgでやってるならimgのclass指定限定とかにすると良いんじゃないかな。

質問文に書いてあるcssをくくっている部分も書いたら
どうしたら適切か教えてくれる人が出るかも
補足コメント
qpman

お礼率 100% (2/2)

迅速なご対応ありがとうございました。
imgでやったらclass限定で出来ました。
投稿日時:2009/09/17 02:10
お礼コメント
qpman

お礼率 100% (2/2)

助かりましたありがとうございます。
投稿日時:2009/09/17 02:13
  • 回答No.1

ベストアンサー率 48% (194/399)

>一枚のイメージの透過

一枚のイメージに、
filter:alpha(opacity=43);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
を指定すればいいのでは?


>bodyより上の画像がすべてすけてしまい
どこに指定してるんですか??
補足コメント
qpman

お礼率 100% (2/2)

ありがとうございます。
おっしゃる通りですね助かりました。
ただその上にメニューと動画を載せようとしたんですが、
floatなどしか重なり回避手段しか分からず、
どのようにしたらその画像の上に載せられるでしょうか。
今制作しているのは、フルサイズで、リキッドレイアウト?なのですが、position?relative absolute fixなどのやり方がいまいち全体像がつかめず、分かりません。
{text-indent:-9999px;}などつかって絶対位置にするとか<h1><h2>とか<img>にどのようにタグをうち、cssでどう書いたら良いでしょうか。
出来ましたら、教えて下さい。
投稿日時:2009/09/17 02:37
お礼コメント
qpman

お礼率 100% (2/2)

皆様迅速なご対応ありがとうございます。もうちょっと勉強します。
すいません夜分遅くにありがとうございます。
投稿日時:2009/09/17 02:40
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ページ先頭へ