• ベストアンサー

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

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

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

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

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

nontronik
質問者

お礼

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

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

  • SortaNerd
  • ベストアンサー率43% (1185/2748)
回答No.3

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

nontronik
質問者

お礼

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

全文を見る
すると、全ての回答が全文表示されます。
  • renton
  • ベストアンサー率34% (1720/4934)
回答No.1

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

nontronik
質問者

お礼

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

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

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

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

    • ベストアンサー
    • HTML
  • 背景画像の上に透過GIF背景をのせる方法

    はじめまして。 メモ帳にHTMLタグ打ち込みでWEBページを作ってるのですが、 bodyで背景画像を指定し、その上に透過GIFをおき、さらにその上にテキストを表示させるにはどうしたらよいのでしょうか。 具体的には、「テキストを表示させるブロック(tableやdiv)の部分」を半透明の透過GIFをフィルターみたいにかぶせて、その上に書くテキストを見やすくさせたい、という動機です。 divのなかのstyle、またはtableでbackgroundを定義しても、もとのbodyの背景が反映されなくなってしまうのですよね。 一応、自分で考えた策としては ・ブロックの背景そのものを、ある程度薄い色に変えた画像を用意してそれをtableの背景にする というものがあるのですが、これはやはりつなぎ目の部分でズレてしまって見栄えがあまりよくないのです。 かなり細かいところにこだわりすぎな感じもするんですが、 ぜひとも叶えたいのでどなたか方法をご存知でしたら教えていただきたいと思います。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • gif画像でたまに背景がグレーになってしまいます。

    はじめまして。 現在、ホームページの画像を作成しています。 photoshopで作成しているのですが、「web用に保存」でgifでしたところ、背景に色がついてしまうときがあります。 ちなみに、背景に色がついてしまうときはかなり小さい範囲の背景を残した時です。 たとえば、四角の枠に画面いっぱいの角丸長方形を作成したときの角の部分などです・・・ これはphotoshop側の問題なのでしょうか? それともWEB表示上の問題なのでしょうか? また、1px単位の境界線を引いた時もカーブがかかっているとかなりギザギザに表示されるときとされないときがあります。 同じレイヤースタイルのものを文字だけ変えて画像にしたときなどにも起こるのですが、これも原因不明で困っています。 どなたか原因と解決方法に心当たりのあるかたはどうかよろしくお願致します。

  • イラストレーター10で作った画像をGoLive6で使用する時

    イラストレーター10で作ったロゴ等を、GoLive6で 使用しようと思ったのですが、イラストレータで作った 画像はWeb用に保存でGoLiveで使えばいいのでしょうか? また、Web用に保存で256色でGif保存しているのに ロゴなどの端がGoLiveに持って行くとギザギザになったり、 四角の形をしている画像でも、端が半透明になったりして、 連続して見た目が悪くなり、背景画像などには使えなくなります。 これを防ぐ、またはイラストレーターで作った画像を GoLiveにて使用するにはどうしたらいいのでしょうか??

  • 背景に自然になじませて透過させる動くアイコンを作りたい

    Photoshopで動くお天気アイコンを作りたいのですが、 地図の上に配置したときに輪郭がギザギザに ならないような画像にしたいんです。 背景が決まった1色の場合、マット処理をすれば自然になじむように 設定できるのですが、背景が地図等なので使えません。 背景になじませるようにPNGにするとアニメにはできないですよね? GIFアニメは諦めようと思うのですが、 何か他にいい方法はありますでしょうか? 動くといっても、2枚の画像をループさせて雲がゆれているように する程度です。 宜しくお願い致します。

  • 画像の背景色とHTMLファイルの背景色

    私がWebページを制作している環境は下記のようになっています。 OSはWindowsXP。 モニターは液晶モニター。 DreamWeaver3でWebページを制作。 FlashMX、FireworksMXを使って、ムービーコンテンツ、画像を作成。 Fireworksで制作した画像をPhotoshop7でJPG形式に変換。(最高画質・低圧縮率で変換) 【ここからが質問です】 DreamWeaverで設定したHTMLファイルの背景色&Flashコンテンツの背景色と PhotoshopでJPGに変換した画像の背景色を 同じカラーコードにしても、 ウィンドウズのプロパティで画面の色を16ビットにすると Webブラウザ上で違った色に見えてしまいます。 (32ビットだと大丈夫) Fierworksで制作したPNG形式の画像をUPすると 色の違いが無くなるのですが JPG形式に変換した画像だとダメです。 このブラウザ上での色の見え方の違いを解決することは出来ないのでしょうか? 仕方のないことなのでしょうか? お分かりになる方、教えてくださると助かります。 よろしくお願いします。

  • 画像で背景透明のテキストがにじむのです

    こんにちは。 いつもお世話になります。 webのバーをイラストレーターCS3で作成してます。 別途、背景に模様の画像を配置しておるので ここは背景が透明のテキストだけの「画像」にしたいのですが gifで保存をいくら試しても文字がぎざぎざしてしまいます。 pngでも変わらず。 背景の画像が黒っぽいので、テキストは白で 0.5~1ほど黒の縁取りをしたりしても同じです。 画像にせずテキストのみのバーにしてもいいのですが デザイン上ちょっと避けたいのです。 なんとか解決策は無いでしょうか。 もしかしたらとんでもなく初歩的なことを聴いてて恥ずかしいのですが ちょっと急ぎで困ってます。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • 背景に複数の画像を入れることは可能でしょうか

    HTML、CSSの初心者の者です。 下記のように、CSSで背景に画像back1.gifを右上に入れているのですが、画面の右下にもう一つの画像back2.gifを入れることは可能でしょうか? もし可能なら、方法を教えて下さい。 初心者向けに易しくご説明頂けると幸いです。 body { background-color:yellow; background-image:url(image/back1.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:right top; }

    • ベストアンサー
    • HTML
  • 画像の背景

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

  • 一番きれいな画像の保存方法を教えてください。

    はじめまして。 現在、photoshopを使用しています。 画像の保存についていくつか疑問点やわからないことがあるのですが、そもそもphotoshopと他のソフト(fireworksなど)では同じ保存形式でも画像のきれい度合は違ってくるのでしょうか? また、photoshopだとテキスト入力の際「なし・シャープ・鮮明・強く・滑らかに」とありますが、どれが一番きれいにはっきりと表示されるのでしょうか? さらに「WEB用に保存」でもディザ云々やバイキュービック法?など普段気にもしていなかったのですが、よくよく見るといろいろな設定があるようです。 いったい、それぞれどれをすれば一番きれい(見やすい)な画像が出来上がるのでしょうか?好みと言われればそれまでなのですが、一般的によく使われる最もきれいとされる保存や入力方法など教えてください。 また、photoshopでGIF画像を保存し、背景を透明にするとどうしても白い枠のようなものができてしまうのですが、これを出さずにきれいに背景を透明にする方法はありますでしょうか? FLASHなどを使用するときにすこし不自由でして・・・ 質問が2つになってしまいましたが、どうかよろしくお願致します。

    • ベストアンサー
    • HTML
このQ&Aのポイント
  • ブラザー mfc-l2750dwの純正トナーを交換しても、交換してくださいの表示が消えずに困っている方も多いです。そこで、トナー交換後の表示が消えないトラブルの解決方法をご紹介します。
  • まず、表示が消えない場合は、トナーカートリッジを正しく取り付けているか確認しましょう。カートリッジが正しくセットされていない場合、表示が消えないことがあります。
  • また、トナーカートリッジの接点が汚れている場合も表示が消えない原因となります。接点を綿棒などで軽く拭いてみてください。それでも表示が消えない場合は、電源を一度切って再度ONにしてみることも効果的です。
回答を見る