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

背景の透明化教えて下さい *画像の上に画像

WEBを作る際に画像の背景をGIFで背景を透明化を選択して保存すると、周りがギザギザになってしまいます。 マットで処理できればいいんですが、その画像の下にHTMLで画像での背景があるため、Backgroundの色が指定ができないんです。 画像自体にページ背景を合わせて保存すればと思ったんですが、HTMLページ全体の背景(リピート)になってるので、画面のサイズを変えるとその背景も移動するため、画像に背景をつけて保存してもどうしようもない状態です。 なんか背景背景ばっかでこんがらがりますよね汗 要は画像1(ページ背景)の上に画像2(ロゴ)の背景を透明化させたものをWEBで表示したいんです。 PhotoShopでもFireworksでも大丈夫です。 どうかご指導よろしくお願いします。

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

  • 回答数3
  • 閲覧数145
  • ありがとう数3

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

  • ベストアンサー
  • 回答No.2
noname#107580

こんにちは! ロゴの位置を左上にしてしまうしかないと思います。 背景画像とそれと同じサイズの背景画像にロゴを重ねて作った画像を用意して ロゴの無い背景画像をページの背景としてリピートさせて ロゴ付きの画像をページのマージンを0にした状態で左上に配置します。 マージンを取りたい場合はその分画像の左と上をカットすれば良いと思いますが、ぴったりいくかどうか・・

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

質問者からのお礼

ありがとうございます。 自分もそれやってみたんですよ。背景自体にロゴつけて背景として表示させてしまえ!と。小さいモニターの場合はいいんですが、大きいモニターだと横に画面が大きいので左上に配置した状態だとやたら左にロゴが寄ってしまうようなレイアウトに見えてしまうんです。 もうちょっとがんばってみます!

関連するQ&A

  • PHOTOSHOPからFIREWORKSに画像をドラッグしたら背景がついてくる。

    フォトショップ上にある背景を切り抜いた画像をファイヤーワークスのドキュメントへ、ドラッグすると、背景がないはずなのに、白い背景がくっついてきて困っています。以前、同じようなことをしたときには、切り抜いた部分だけファイヤーワークスに移動できたのに、今日、同じことをしたら、白い背景が残ってしまいます。 もちろん、フォトショ上の画像の背景を透明にして、pngか透明gifで一旦保存すれば、そのファイルをファイヤーワークスで開けば背景は透明になるのですが、それだとたくさんの画像の処理に時間がかかるので、フォトショからダイレクトにファイヤーワークスのドキュメント画面上にドラッグして画像を編集したいのですが、どうやったらいいのでしょうか? 以前はうまくできたのですが…。

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

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

  • <TD>の背景を画像にするとき

    <TD>の背景を画像にするときに画像を縮小することはできますか。 <TD BACKGROUND="sample.gif"> の時に、 sample.gifを原寸でなく、サイズを指定したい。 #できないという断言も歓迎。

    • ベストアンサー
    • CSS

その他の回答 (2)

  • 回答No.3

背景画像の大体の色に合わせれば幾分ましになります。 また、pngで保存すれば綺麗に表示されます。大部分のブラウザで表示できませんが。

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

質問者からのお礼

pngだといいんですけど、IEで表示するとロゴ背景が灰色になっちゃうのでだめなんです。pngの書き出しの設定のところでなんとかならんもんかと思ったんですが、やっぱりダメみたいですね。

  • 回答No.1
  • renton
  • ベストアンサー率34% (1720/4934)

1.そんなレイアウト構成にしない。 2.透過をやめる。 3.気にしない。 という感じですかね。

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

質問者からのお礼

そんなレイアウト構成にしない。 ですよね・・・。 クライアントの指示がそのような形だったので、なんとかできるものかと思ってたんですが、なかなかうまくいきません。

関連するQ&A

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

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

    • ベストアンサー
    • HTML
  • 背景画像が透けて見えるボタンの作り方

    ホームーページを作るにあたり、背景画像が透けて見えるメニューボタンを使いたく試していました。 最近よく使われているガラスボタンではなく、下の画像が本当に透けて見えるボタンです。 Fireworksで背景に使う画像をおき、その上にどのくらいの透明度が良いか調整しながら作っていました。 良さそうな感じでできたので、ボタンだけをコピーして新規作成でボタンを貼り付け、いざ書き出してDreamweaverで設定してみるとマットになっています。 周りを透明にしたいのではないのですが、書き出しの時に透明化の設定で透明を選んでみたり… 自分で分かる範囲で試したのですがどうにもうまくいきません。 画像はgif形式で保存しました。 どのような手順で、どのような形式の画像を作れば良いのか教えてください。 よろしくお願いいたします。

  • フォトショップエレメンツ4.0 背景を透明な画像に保存するために

    フォトショップエレメンツ4.0を使用しています。切り取った画像を背景を透明にしてDTPソフトに読み込みます。GIFかPNGにしなければ透明にならないとの事で、web用に保存をクリックしてGIFを選んでいます。しかし切り取った画像を見ると境界線の周りが白くなっています。この白を取り除くにはどうしたらいいのでしょうか?判らないままティザ128に設定していますがそれが原因でしょうか?

  • 画像からロゴだけを切り取って使いたい。

    やりたいことは、お店の看板を撮った画像やロゴの入った封筒などをスキャンしたものから、ロゴだけをそのまま使用して、バナーみたいなものを作りたいのですが、いい方法がよくわかりません。 こちらのサイトなどでも色々検索してみて、やってみたことは、フォトショップ6でその画像を開き→色はRGB、背景のレイヤーを0にする→自動選択ツールか色域指定で透明にしたい部分を選択し、Deleteで削除→web用に保存をして、Gifを選択・透明部分にチェックを入れて保存。 この保存したものを、イラストレーターかウェブアートデザイナーで作った背景にかぶせる。 という風にすると、背景は透明になっているのですが、ロゴの周りに白くギザギザしたものがあってみにくいのです。 フォトショップやイラストレーターはほんとに初心者なので、どうすればいいかまったくわからず質問させて頂きました。 やはり初心者のできるレベルでは、ないのでしょうか・・・? 持っているソフトは、フォトショップ6とイラストレーター10などです。 質問もわかりにくいかもしれませんが、どうぞ宜しくお願いします。

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

    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
  • フォトショップ5.0で背景が透明な画像を...

    フォトショップの5.0を使っていますが、イラストレーターで作ったパスを背景が透明なPNG形式の画像を作りたいのですが、メニューのファイルの中に「web用に保存」がなくて、画像の作り方がわかりません。 ai形式のパスを読み込んで「複製を保存」や「別名で保存」でPNGを選ぼうとしてみてもPNGがありませんでした。 フォトショップ5.0では、どうやって背景が透明な画像を作ればいいのでしょうか?

  • 画像の背景(キャンバス)を透明にして書き出すには?

    FireWorks、イラストレーター、フォトショップのどれでもよいのですが、 画像を作って、それをもう1つの画像の上に重ねたい時の疑問です。 例えば、パワーポイントで作ったプレゼンテーションに、写真が貼り付けてあり、その上に☆の形の画像を作成し、貼り付けたいとします。 FireWorks、イラストレーター、フォトショップ等で☆を作って書き出すと、 ☆の周りに白い隙間が残ってしまいます。 背景が黒とか白とわかっていれば、背景を初めからその色にしておけば いいのですが、写真の上に重ねたい画像の場合、そういった事もできず、 四すみの白い部分が邪魔になります。 背景を透明にし、画像を他の画像の上に重ねても不自然にならないようにする方法はありませんでしょうか? 宜しくお願い致します。

  • <tr>の背景画像について

    お世話になっております。 表題のとおりなのですが、 <table width="500px"> <tr style="background-image:url('back.gif');"> として、 back.gifが500pxの画像だとします。 <tr style="background-image:url('back.gif');"> <td>aaaa</td> </tr> と、tdが1つだった場合は問題ないのですが、 <tr style="background-image:url('back.gif');"> <td>aaaa</td> <td>bbbb</td> </tr> とした場合、250pxが2枚繰り返しのような状態になってしまいます。 これを回避し、tdが何個になっても、trの画像を1枚で表示させることはできないでしょうか。 ちなみに、背景画像は500px固定です。短く切ってリピートはできない状態です。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • gif ってぼかしは効かないのでしたっけ?

    Photoshop でロゴを作成しようとしています。 ページの背景にパターンを使用しているため、ロゴの背景を透明にしてページ背景のパターンが見えるようにしたいのです。 ロゴは、gif で作ろうとしています。 Photoshop のテキストでロゴを入力し、ラスタライズし、gif で保存するためインデックスカラーに変換します。 すると、ロゴの輪郭がカクカクしてしまって、うまくぼやけてくれません。 gif は、輪郭のぼかしは出来ないのでしたっけ? 別のソフトでは、出来たような気がするのですが、Photoshop での 透過gif の作り方を教えてください。

    • ベストアンサー
    • CSS
  • フォトショップで背景透明にすると画像が荒れてしまう

    似たような質問が多いなか恐縮ですが、教えてください。 イラストレーターで作ったライン(線のみ)を、フォトショップを使って背景を透明にしました。 GIF形式で保存したのですが、そのGIFファイルを開くとラインが荒くギザギザになっていました。 どうしてでしょうか? なめらかなラインのままGIFで保存する、なにかいい方法がありましたら教えてください。 イラストレーターは9、フォトショップはElementsです。 ほとんど初心者です。 どうかよろしくお願いします。