- ベストアンサー
画像の背景を透明にしたい
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは、再び失礼します。 GIMP http://hp.vector.co.jp/authors/VA025935/ こちらのヘルプを見てみましたが、PNGもGIFも透明度に対応している、と書かれています。 （GIFはGIMPのバージョンによっては入っていないかもしれないと書かれていましたが） というわけで、直接の回答でなくて申し訳ありませんが、お使いのソフトは透過処理に対応しているようです、と申しあげておきます。 レイヤーの統合とかは関係ないですよ。 完成した画像の背景が透明になっているかどうか、そしてそれを保存するときのやりかたが問題です。 保存するときに背景の透過、とか透明、とかそういった選択部分はありませんか？ または環境設定などで行うのかもしれませんが、具体的な方法についてはご存知のかたにぜひともお答えいただきたいところです。
その他の回答 (3)
- sankanbi
- ベストアンサー率75% (3/4)
ロゴを作成したときの画像モードはRGBだったと思うのですが 透明ＰＮＧやＧＩＦは画像モードをインデックスにしなくてはなりません。 最終的に1枚のレイヤーに統合したものを 画像ウィンドウ右クリック→画像→モード→インデックスでインデックス化します。 インデックスは最高256色になりますが透明がある場合は255色と指定します。 この処理をされたでしょうか？
お礼
インデックスモードにするのですか。ありがとうございました。早速試してみたいと思います
- 918BG
- ベストアンサー率48% (476/984)
＞ そもそも背景を透明のまま保つことは不可能なのでしょうか？ 可能です。ただし、いくつか条件があります。 まず、質問者さんご自身も言っていらっしゃいますが、JPEGは背景を透明にはできません。それに対してPNGとGIFは背景を透明に「することが可能」です。常に背景が透明になるとは限らない点に注意が必要かもしれません。 もう一つ注意すべき点として、画像を作成するアプリケーションソフトには、PNGやGIF画像の背景を透明にするための「機能を備えたものと、機能が備わっていないものの両方が存在する」という事があります。 極端な例としては、余白部分が透明なフリー素材をダウンロードして手に入れたのは良いけれど、一部分を自分が気に入ったように修正しようとして「機能が備わっていない画像ソフト」で修正を加え、それから保存し直したら、最初は透明だった余白部分が不透明になってしまったという場合もあります。 No.1の回答者さんが仰る通り、HTMLはこの場合関係無さそうです。問題の画像が、入手されたものか質問者さんご自身でお作りになったものかわかりませんが、解決のカギは画像作成に使ったソフトにありそうな気がいたします。
お礼
ありがとうございます できました
補足
失礼ですがNO.1さんへの補足も兼ねます 使っている編集のソフトはGIMPです （ほかの話題のあるフリーソフトも入れていますが、ほとんどGIMPしか使っていません） 保存するときに注意してみてみると、レイヤーの統合をしますか？のようなメッセージがでました 無視、エクスポートを試しましたが、結果は同じです。 編集時には透明な背景も使えるので、保存するときに作業が必要なのかもしれません。 そのあたりのことを知っていたら教えてください。
- canaanium
- ベストアンサー率47% (106/224)
こんにちは。 作成されたロゴは透過処理されていますか？ 作成された画像自体が透過処理されていなければ意味がありませんので、HTMLは関係ありません。 背景透過された画像を普通の画像と同じように<img src=>で貼り付けるだけです。 なお、仰るとおりにGIFとPNGでは背景透過処理ができます。JPGはできません。 もし、よくわからないということでしたら、参考までにどんなソフトを使用してロゴを作成したのか明記していただくと、ユーザーの方が透過の仕方を教えてくださるかもしれません。
関連するQ&A
- 背景画像にロゴを重ねる方法を教えてください。
ＣＳＳで背景画像にロゴを重ねる方法を教えてください。 現在、 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
- テーブル背景の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サイトも完成します。 切実に宜しくお願いします。
- 締切済み
- HTML
- jpg画像の背景を透明にしたい
自作ＤＶＤレーベル画像に、フリーソフトのDeepBurnerを使って、ロゴ（gif形式）を付けたいのですが、DeepBurnerではgif形式が使えず、jpgで貼り付けますと、ロゴの背景が四角く白く出てしまいます。 jpg形式で背景を透明化できないものかとフォトショップでいろいろ試してみましたが、できませんでした。 レーベル画像に、背景なしの、文字だけのロゴを付けたいのですが、どうすれば良いでしょうか？説明不足でしたらすみません！
- ベストアンサー
- その他(ソフトウェア)
- 画像をクリックして別の画像を変えたい
ボタン画像をクリックしたときに同一ページ内にある画像が変わるようにしたいのですが、下のように描くと、ボタン画像（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>より上に持ってきたら思っていた動きになりました。） けれどそれからどう修正したらもとの順番でもちゃんと動くのかがわかりません。過去ログの似た質問も拝見したのですが、今の自分では理解できませんでした‥。すみませんがよろしくお願いいたします。
- ベストアンサー
- JavaScript
- 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
- ヤフオク出品画像で背景画像を外部から呼び出し 正しいHTMLは？
外部から通常画像を呼び出すときは分かるのですが、 背景（テーブル背景）の呼び出しに失敗します。 まず、通常画像を呼び出しの場合はこうですよね。 <img src="http://www.〇〇〇〇〇/△△△△.jpg" width="△△" height="△△"> これは簡単に成功します。 なのに、テーブル背景にするとき <table width="△△" height="△△" border="△" align="center" background="http://www.〇〇〇〇〇/△△△△.jpg" class="△△"> にしているのに、 ヤフオクの画面上では表示されません。 根本的なHTMLの原因があるのでしょうか？ それともヤフオクでは背景画像への指定はもともとできないのでしょうか。 お分かりの方、良ければHTMLも含め、宜しくお願いいたします。
- ベストアンサー
- HTML
- 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」をつけております。 マウスオーバーで背景を変更する方法とマウスオーバーで画像を変更する方法とボックス全体をリンクにする方法はそれぞれ見つけたのですが、うまく組み合わせることができません… 何か解決策がございましたら教えてください。 よろしくお願いいたします。
- 締切済み
- JavaScript
- 透過して画像を背景に貼り付ける方法
背景に写真を切り抜いた画像を貼り付けてＨＰにＵＰしたいと思っていますが、自分で色々やってみましたが出来ません。 jpgの背景画像にjpgの写真（綺麗に形を切り抜いた物）を合成はできるのですが、 切り抜いた画像の周りを透過させて、別の背景に貼り付けて、合成したいのです。 透過させると、gifかpngで保存ですよね。でその画像を背景と合成させるのができません。背景にそれを貼り付け、コピーなどすると、透過できなくて、画像の周りに四角く枠ができます。画像編集ソフトで、gifが読み込めません。でpngに変更して、保存すると透過出来なくて！ 困っています。最初から素材でpng透過してある物も、出来ません。ソフトはwinxpに標準でついているもの（フォトレタッチとビルダーv6.5ライト）意外はIrfan とPict Bear（ペイントソフト）のようなものしかありません。 あまり、画像処理ソフトの使い方が分からずにいます 上記のフリーソフトも使いこなせずにいる、初心者です。 良い方法があったら教えてください 市販のソフトでないと、このような事は出来ないのですか。 どうぞ宜しくお願いいたします 説明が分かりづらくてすいません
- 締切済み
- Windows XP
お礼
ありがとうございます 方法がわかりました