• ベストアンサー
  • すぐに回答を!

画像の背景を透明にしたい

HTMLで<img src=>を使ってロゴ画像を貼り付けました その後背景の画像をSSCで書いたのですが ロゴの本来透明な部分が透明になりません よくわからなかったので、フォーマットはPNGとGIFで試しましたがだめでした JPGは背景を透明にはできなかったですよね? そもそも背景を透明のまま保つことは不可能なのでしょうか?

共感・応援の気持ちを伝えよう!

  • 回答数4
  • 閲覧数2818
  • ありがとう数4

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

  • ベストアンサー
  • 回答No.3

こんにちは、再び失礼します。 GIMP http://hp.vector.co.jp/authors/VA025935/ こちらのヘルプを見てみましたが、PNGもGIFも透明度に対応している、と書かれています。 (GIFはGIMPのバージョンによっては入っていないかもしれないと書かれていましたが) というわけで、直接の回答でなくて申し訳ありませんが、お使いのソフトは透過処理に対応しているようです、と申しあげておきます。 レイヤーの統合とかは関係ないですよ。 完成した画像の背景が透明になっているかどうか、そしてそれを保存するときのやりかたが問題です。 保存するときに背景の透過、とか透明、とかそういった選択部分はありませんか? または環境設定などで行うのかもしれませんが、具体的な方法についてはご存知のかたにぜひともお答えいただきたいところです。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ありがとうございます 方法がわかりました

関連するQ&A

  • jpg画像の背景を透明にしたい

    自作DVDレーベル画像に、フリーソフトのDeepBurnerを使って、ロゴ(gif形式)を付けたいのですが、DeepBurnerではgif形式が使えず、jpgで貼り付けますと、ロゴの背景が四角く白く出てしまいます。 jpg形式で背景を透明化できないものかとフォトショップでいろいろ試してみましたが、できませんでした。 レーベル画像に、背景なしの、文字だけのロゴを付けたいのですが、どうすれば良いでしょうか?説明不足でしたらすみません!

  • 背景画像にロゴを重ねる方法を教えてください。

    CSSで背景画像にロゴを重ねる方法を教えてください。 現在、 htmlが以下の状態 <div class="dz_headbar"> <a href="test.html" target="_blank"><img src="title.gif" alt="ロゴ" " style="border:0"></a> </div> cssが以下の状態です。 .dz_headbar { background-image: url("3gradation.png"); background-position: left top; background-repeat: repeat-x; padding-top: 50px; } ヘッダー背景の3gradation.pngの上にロゴ画像であるtitle.gifを重ねたいのですがどうもうまくいきません。 ご教授いただける方何卒宜しくお願いします。

    • ベストアンサー
    • HTML
  • 画像をクリックして別の画像を変えたい

    ボタン画像をクリックしたときに同一ページ内にある画像が変わるようにしたいのですが、下のように描くと、ボタン画像(button.gif)自身が2.pngなどの画像に変わってしまいます。   <HTML> <HEAD> <TITLE>スワップイメージ</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function changeImage(imageUrl){ document.images[0].src = imageUrl; } // --> </SCRIPT> </HEAD> <BODY> <A HREF="#" onClick="changeImage('1.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(2.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(3.png')" ><IMG SRC="button.gif" border="0"></A> <TABLE BORDER="0"> <TR> <TD>ボタンを押すと下に画像が表示されます。</TD> </TR> <TR> <TD><IMG SRC="1.png"></TD> </TR> </TABLE> </BODY> </HTML> 原因を私なりに考えたところ、設定した変数mageUrlをボタンを表示させるために使った<img src="button.gif">で受け取ってしまっているというのはわかりました。(確認のため <IMG SRC="1.png"> を<A HREF>~</A>より上に持ってきたら思っていた動きになりました。)  けれどそれからどう修正したらもとの順番でもちゃんと動くのかがわかりません。過去ログの似た質問も拝見したのですが、今の自分では理解できませんでした‥。すみませんがよろしくお願いいたします。

その他の回答 (3)

  • 回答No.4

ロゴを作成したときの画像モードはRGBだったと思うのですが 透明PNGやGIFは画像モードをインデックスにしなくてはなりません。 最終的に1枚のレイヤーに統合したものを 画像ウィンドウ右クリック→画像→モード→インデックスでインデックス化します。 インデックスは最高256色になりますが透明がある場合は255色と指定します。 この処理をされたでしょうか?

共感・感謝の気持ちを伝えよう!

質問者からのお礼

インデックスモードにするのですか。ありがとうございました。早速試してみたいと思います

  • 回答No.2
  • 918BG
  • ベストアンサー率48% (476/984)

> そもそも背景を透明のまま保つことは不可能なのでしょうか? 可能です。ただし、いくつか条件があります。 まず、質問者さんご自身も言っていらっしゃいますが、JPEGは背景を透明にはできません。それに対してPNGとGIFは背景を透明に「することが可能」です。常に背景が透明になるとは限らない点に注意が必要かもしれません。 もう一つ注意すべき点として、画像を作成するアプリケーションソフトには、PNGやGIF画像の背景を透明にするための「機能を備えたものと、機能が備わっていないものの両方が存在する」という事があります。 極端な例としては、余白部分が透明なフリー素材をダウンロードして手に入れたのは良いけれど、一部分を自分が気に入ったように修正しようとして「機能が備わっていない画像ソフト」で修正を加え、それから保存し直したら、最初は透明だった余白部分が不透明になってしまったという場合もあります。 No.1の回答者さんが仰る通り、HTMLはこの場合関係無さそうです。問題の画像が、入手されたものか質問者さんご自身でお作りになったものかわかりませんが、解決のカギは画像作成に使ったソフトにありそうな気がいたします。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ありがとうございます できました

質問者からの補足

失礼ですがNO.1さんへの補足も兼ねます 使っている編集のソフトはGIMPです (ほかの話題のあるフリーソフトも入れていますが、ほとんどGIMPしか使っていません) 保存するときに注意してみてみると、レイヤーの統合をしますか?のようなメッセージがでました 無視、エクスポートを試しましたが、結果は同じです。  編集時には透明な背景も使えるので、保存するときに作業が必要なのかもしれません。  そのあたりのことを知っていたら教えてください。

  • 回答No.1

こんにちは。 作成されたロゴは透過処理されていますか? 作成された画像自体が透過処理されていなければ意味がありませんので、HTMLは関係ありません。 背景透過された画像を普通の画像と同じように<img src=>で貼り付けるだけです。 なお、仰るとおりにGIFとPNGでは背景透過処理ができます。JPGはできません。 もし、よくわからないということでしたら、参考までにどんなソフトを使用してロゴを作成したのか明記していただくと、ユーザーの方が透過の仕方を教えてくださるかもしれません。

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • jQueryで背景画像と複数画像を変更

    jqueryで、divのボックス全体をリンクにし、マウスオーバーでdiv内の画像2点とdivの背景画像を変更したいと考えております。 <div class="linkbox">  <img src="image01.gif">  <img src="image02.gif"> </div> マウスオン用の画像は image01_on.gif image02_on.gif bg01_on.gif と、統一して「_on」をつけております。 マウスオーバーで背景を変更する方法とマウスオーバーで画像を変更する方法とボックス全体をリンクにする方法はそれぞれ見つけたのですが、うまく組み合わせることができません… 何か解決策がございましたら教えてください。 よろしくお願いいたします。

  • 画像の背景

    単純な質問で申し訳ありません。 現在、HTMLでホームページを作成しようとしているのですが、 画像の背景色が、ホームページ自体の背景色と同じになるようにするには、どのようにしたら良いのでしょうか? 例えば、ロゴを作成して、GIFで貼り付けると、 文字以外の余白が白くなり、背景色から浮いてしまいますよね? 文字以外の余白の部分が背景色と一緒にするのにはどうしたらいいでしょうか?

  • リンクした画像の大きさをしていするには?

    たとえば、 <a href="a.jpg" target="_blank"><img src="00.gif"> だとして、00.gifからa.jpgにリンクするのですが、 画像が小さいのに、大きな画面の中にその画像が はじっこに出てしまいます。 画像がぴったしになるように大きさを 指定するにはどうしたらいいのですか?

  • 透過して画像を背景に貼り付ける方法

    背景に写真を切り抜いた画像を貼り付けてHPにUPしたいと思っていますが、自分で色々やってみましたが出来ません。 jpgの背景画像にjpgの写真(綺麗に形を切り抜いた物)を合成はできるのですが、 切り抜いた画像の周りを透過させて、別の背景に貼り付けて、合成したいのです。 透過させると、gifかpngで保存ですよね。でその画像を背景と合成させるのができません。背景にそれを貼り付け、コピーなどすると、透過できなくて、画像の周りに四角く枠ができます。画像編集ソフトで、gifが読み込めません。でpngに変更して、保存すると透過出来なくて! 困っています。最初から素材でpng透過してある物も、出来ません。ソフトはwinxpに標準でついているもの(フォトレタッチとビルダーv6.5ライト)意外はIrfan とPict Bear(ペイントソフト)のようなものしかありません。 あまり、画像処理ソフトの使い方が分からずにいます 上記のフリーソフトも使いこなせずにいる、初心者です。 良い方法があったら教えてください 市販のソフトでないと、このような事は出来ないのですか。 どうぞ宜しくお願いいたします 説明が分かりづらくてすいません

  • 画像の上に画像

    HPでcenterで例えば600サイズの外枠をつくりその中にHPの内容を表示するようにしています。 その中のひとつの写真(jpg)の上に画像(gif)を重ねて表示したいのですがスタイルシートで位置を指定したときに下記のように指定するとその指定した部分(jpg画像の上の部分)のスペースが画像のサイズ分空いて指定したところへ画像は重なります。 その空いてしまうスペースをなくしたいのですがどうにもなりませんでした。absoluteもfixedも試しましたがこれだとウィンドウサイズによって位置がずれるようです。 <span style="position: relative; left:15px; top:455px;z-index:1;">  <img src="./images/***.gif" border="0"></span> <td><img src="./imeges/***.jpg" ></td> すごく困ってしまっています。知っている方教えてください。

  • テーブル背景のpng画像を透過したい

    テーブルの背景に透過部分を含んだpng画像を設定して、その上に文字を載せたいと考えています。簡略化した現在のタグは以下です。  <table>   <tr>   <td background="(png画像URL)">    ここに文字   </td>   </tr>  </table> 通常だとこれで良いのですが、このpng画像は透過部分を含んでいます。(ちなみにpng-24です) WindowsのIE7.0だと正常に透過されるのですが、IE6.0や他のブラウザですと透過部分が青白く浮かび上がってしまいます。 私はIE6.0でも透過されるように表示させたいのです。 欲を言うと、MacのSafariでも透過させたいです。 一方、テーブルの背景に設定していない、普通の画像ですと<img src="">タグを使っているのでCSSを利用して、 <スタイルシート指定部分> .ail { filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.firstChild.src + ", sizingMethod=scale)"); width: expression(this.firstChild.clientWidth+"px"); height: expression(this.firstChild.clientHeight+"px"); } .ail img { visibility: expression("hidden"); } </スタイルシート指定部分> <画像部分>  <span class="ail">  <img src="(png画像URL)">  </span> </画像部分> で透過しているのですが、テーブルの背景に指定した画像では、このタグは使えません。 他にも色々な方法を検索したのですが有効なものが見つからず、、、 そもそも、テーブルの背景に指定したpng画像は透過できないものなんでしょうか…?というところまで考えてしまいます。 もし方法があれば教えて欲しいですが、HTMLで実現不可能な範囲なのならばそれも指摘して欲しいです。 この部分だけクリアできれば、Webサイトも完成します。 切実に宜しくお願いします。

  • jquerで画像の入れ替えをしたいのですが、上手く行かず困っております

    jquerで画像の入れ替えをしたいのですが、上手く行かず困っております。 ブロックを丸ごとクリック範囲にするため、透過gifをかぶせています。 htmlは下記のようになりますが、マウスオーバーで背景と、<p class="ここも変更">に入っている画像を入れ替えたいです。 <ul> <li> <div class="data"> <h3>タイトル</h3> <p>~</p> <p class="a">~</p> <p class="ここも変更"><img src="***.png" /></p> </div> <img src=".**.jpg" /> <a href="***.html" class="sp"><img src="sp.gif" /></a> </li> </ul> 背景についてはスクリプトができております。 liにクラスをつけて、cssで背景を書き換えています。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ $(function(){ $("body#list.index #contents ul li a.sp").mouseover(function(){ $(this).parents('li').addClass("over") ; }).mouseout(function(){ $(this).parents('li').removeClass("over"); }); }); ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ しかし、<p class="ここも変更">の部分について、セレクタの指定がうまくできずにいます。 よろしくお願いいたします。

  • firefoxで表示される画像がIEで表示されない

    同じHTML内に <img src="images/9.jpg" alt=""商品画像 /> と <img src="images/title_1.gif" /> がありますが firefoxでは上記の画像を含めすべての画像が表示されますが IEでは <img src="images/title_1.gif" />は表示されるが <img src="images/9.jpg" alt=""商品画像 />は 表示されません。 なぜか判りません。 原因がまったくわかりません。 教えてください。よろしくお願いします。

    • ベストアンサー
    • HTML
  • 画像に背景色と境界線を付けたい。

    いつもお世話になります。 画像の周りに背景色その外側に線を引きたく思っています。 (1) <div style="border:solid 5px gray;padding:20px;background-color:lightcyan;" > <img src="**.jpg" alt="**"> </div> と、すれば可能ですが (2) <img src="**.jpg" alt="**" style="border:solid 5px gray;padding:20px;background-color:lightcyan;" > とすると境界線は表示されても背景色が表示されません。 (1)のように<div>タグを用いなくて、(2)のように<img>タグのみで(1)のようなことはできないものでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 画像が表示されません。(IE以外)

    前回背景画像が映らなかったことを質問して解決したのですが 今度は普通の画像が映りません。記述はこうです。 <img src="ロゴ.gif" width="500" height="140"> 普通基本はこれでしたよね(本にも載っていますが。。。) 僕のPCが古いのでしょうか。また記述が間違っているのであれば 正しい記述を教えてください。

    • ベストアンサー
    • HTML