• ベストアンサー

半透明の画像をcssのbackground-imageで指定しても半透明のまま表示させたい

photoshopにて、単純に塗りつぶして不透明度を50%にしただけの画像をpng-24で保存しました。 これをhtmlのimgタグで表示させるとちゃんと半透明で表示されるのですが、cssのbackground-imageで指定すると半透明ではなくなってしまいます。 cssのbackground-imageでも半透明の状態で表示させる方法がありましたら教えてください。お願いします。

  • CSS
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • karita_83
  • ベストアンサー率45% (39/86)
回答No.1

背景に指定しても本来半透明で表示はされるはずです ご覧になっているブラウザーはなんでしょうか? IE6では半透明を再現できないのでおそらくハックを使っていらっしゃるかと思うのですが、 そのソースをご提示いただけると原因がわかるかとおもいます 携帯からなので言葉足らずの回答になって申し訳ございませんが、 よろしければ補足をいただければと思います

3104kita
質問者

補足

お返事おそくなりすみません。 どうやら勘違いだったようです…。背景白で、真っ黒の画像を50%の不透明度にしただけだったので、透過されていないように見えていただけでした。色々試してbackgroundでもちゃんと透過されることが確認できました。 お騒がせしてすみませんでした。 ありがとうございます。

その他の回答 (1)

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.2

IE6以下なら<img>でもbackgroundでも透過表示されません。 単に薄くなっているだけだと思いますが、 それともスターハックで処理しているのでしょうか? ※ <img>の枠に背景色を試せば適応されているか判断できます。 解説サイトがありましたが、これでどうでしょうか? http://blog.l-xs.com/yungsang/2006/12/png_alpha_filter_ie7.html 背景画像なのだから、透過png処理しなくても 透過したままの見たまま加工すれば良いかとも思いますが、 更に何か上下で画像や背景色を併用しているのでしょうか。

3104kita
質問者

補足

お返事おそくなりすみません。 どうやら勘違いだったようです…。背景白で、真っ黒の画像を50%の不透明度にしただけだったので、透過されていないように見えていただけでした。色々試してbackgroundでもちゃんと透過されることが確認できました。 お騒がせしてすみませんでした。 ありがとうございます。

関連するQ&A

  • cssで画像のパスを指定する場合

    cssで画像のパスを指定する場合は、background-imageでいいのでしょうか? 今は img.sample { background-image: url("http://test.jpg") のようにやっていますが 昔やった方法は background-image ではなく srcを使っていた気がします。 background-imageでも問題なく表示されますが、 <img class="sample"> のように、imgタグを使っているのだから、srcのほうがいいのかな、と思ってしまいます。 実際はどちらがいいのでしょうか?

    • 締切済み
    • CSS
  • CSSのbackground-imageについて

    CSSのbackground-imageについて質問です。 前回「CSSでメイン部分が80%ぐらいに表示するには? http://okwave.jp/qa/q7728293.html 」で質問した者です。 ______ ||   || ||main || ||   || ||   || ~~~~~~ background-imageでメイン部分以外をパターン画像を使いたいと思いました。 そこでふと疑問が沸いたので質問させてもらいます。 sidebar-left, main, sidebar-rightをdivで区切っていると、 background-imageで背景画像を指定するにはsidebar-leftとsidebar-rightの2カ所に同じ画像を指定しないといけません。 divで区切るたびにbackground-imageを指定するのはは間違っているのでしょうか? 背景画像を何か所も指定するやり方は間違っているような気がしたので質問します。

    • ベストアンサー
    • CSS
  • CSSでの画像指定について。

    CSSでの画像指定について。 ファイルパスの指定について教えてください。 フォルダ1の中に「sample.html」、「sample.css」、「img」フォルダが入っており、 「img」フォルダの中に、「nature_01.gif」が入っています(下図)。 -------------------------------------------------------------------------- フォルダ1 L sample.html L sample.css L img(フォルダ)  img(フォルダ)  L nature_01.gif   ---------------------------------------------------------------------------- このファイル構成だと、sample.css の中で 『background-image:url(/img/nature_01.gif)』のようにパスを指定すれば良い と理解していたのですが、背景に画像が表示されませんでした。 その後、下記のように修正すると、画像が表示されるようになりました。 firefox3.5 →修正後は画像が表示される。 Internet explore 8 →修正前、修正後ともに表示されない。 ----------------------------------------------------------------------- 【修正前】 #contents{ width:750px; background-image:url(/img/nature_01.gif); 【修正後】 #contents{ width:750px; background-image:url(../img/nature_01.gif); ------------------------------------------------------------------------ OS・・・windows xp なぜ、こうなるのか、わかるかたがいましたら教えてください。 よろしくお願いします。

  • css 画像を表示・設定

    cssでimgタグを使って画像を表示させたいのですが、 css内でsrcは使えないのでしょうか? img{ background-image:url( http://orange.jpg ) } このような書き方しかできないのでしょうか? 上記の書き方だと、画像の周りに線ができて、更にhtmlソース内のaltの文字まで表示されてしまいます。

    • ベストアンサー
    • HTML
  • cssで、imgタグに、背景画像を敷きたい

    cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 <HTML> <div id="hoge"> <img src~ <CSS> #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ? width:? height:? margin:? padding:?; <影の大きさ> ・width400px ・height200px <写真のサイズ指定> ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • background-imageの画像を拡大する方法はありますか?

    background-imageの画像を拡大する方法はありますか? cssでbackground-imageを指定しています。 baackground-image: url('画像のアドレス'); この画像を拡大する方法はあるのでしょうか。 ありましたら、教えてください。 普通の画像はimageタグでwidthやheightで拡大縮小できるのですが、 baackground-imageではどうやっていいか、調べてもわかりませんでした。

  • cssで背景画像をランダム表示する

    現在cssで背景画像をランダム表示するよう指示をしたいです。 テンプレート配布サイトからDLしたcssには以下のように指定されています。 ---- .menu{ float :left; background-image:url(img/menu_01.png); background-repeat:no-repeat; width :270px ---- このようなcss表記から画像をランダム表示に指定するには どのように加筆、修正をしたらよいのか教えて頂けますでしょうか。 似たような質問もたくさんされていたのでとても申し訳ないのですが、自力で色々試してみたものの、 どうしてもわからなかったので、お力を貸して頂ければ幸いです。 よろしくお願い致します。

    • 締切済み
    • CSS
  • cssの画像切り替え

    宜しくお願いします。 cssでのhoverを使った画像の切り替えを教えてください。 ○html <dl id="dl">  <dt id="dt"><a href="#"><img src="img/image1.jpg" alt="" /></a></dt>  <dd>あ</dd> </dl> ○css #dl     {     width: 170px;     height: 170px;     margin: 0;     } #dt a     {     text-decoration: none;     } #dt a:hover { background-image: url(img/image2.jpg); text-decoration: none;     } というソースで、cssを使い画像を切り替えたいのですが、できません。 html指定で、<img src="~">で画像を表示させておき、 切り替える方法としましては、hoverを使いbackground-imageを使うしかないと思います。 background-imageからbackground-imageへの切り替えは、できるのですが、今回の場合は、どうしてもhtml指定で、<img src="~">からの切り替えを行いたいです。 そもそも、html指定の、<img src="~">で画像を表示する場合、cssで切り替えれるものなのでしょうか? 出来る限り、cssでの切り替えをしたいと考えています。 どなたか、分かる方お願いします。

    • ベストアンサー
    • HTML
  • 画像配置のimgタグとbackgroundの違い

    画像をHTMLでimgタグで指定するタイプとCSSでbackgroundで指定するタイプの二つありますが、 何のときにimgタグを、何のときにbackgroundを指定するか、知りたいのです。 例えばコンテンツ内ならimgタグ、背景に配置するならbackgroundってのは分るのですが、 タイトルの画像はimgタグとbackgroundのどちらでしょうか? 他のサイトで拝見してみましたら、どっちも使いますが… 宜しくお願いします。

    • ベストアンサー
    • HTML
  • background-imageが効かない

    HTML5で組んだページでCSSを使っています。 bodyタグに設定したbackground-imageは背景に画像が表示されるのですが、body内に置いたid名をつけたdivタグに設定したbackground-imageが効きません。どのようにすれば効くのでしょうか。 【効く】 body { background-image: url("./images/haikei.jpg"); } 【効かない】 #contents { background-image: url("./images/haikei.jpg"); } そもそも、HTML5でdivタグを使うこと自体が誤りなのでしょうか。

    • 締切済み
    • CSS

専門家に質問してみよう