画像を重ねた時の輪郭にでる白い汚れ

質問

なんだかよくわからないタイトルだと思うのですが、
たとえば背景にbackground-imageで画像を指定します。
その上に<img>タグで画像をのせます。
すると上にのせた画像の周りに白い汚れ？(たぶんドットの仕業なのでしょうが・・・？)が出てしまうのです。
画像をうまく重ねてデザインしているサイトをよく見かけるのですが
なぜ、そういった現象がおきてきますのでしょうか？
回避策または原因をご存知の方がいましたらご教示願います。
ちなみに画像等は、イラストレータで作成したものを使っています。
よろしくお願いします。

回答No.5

ao_ · ベストアンサー

#2です。分かりにくい回答ですみませんでした。
background-imageの画像をA。<img>タグでの画像をBとします。

Bを作成している時点でその背景色は白ではないでしょうか？
画像にはアンチエリアスといって、輪郭が背景にうまく溶け込むような処理がされています。つまりBの輪郭には白に近い色が残ります。

Aに馴染ませるなら、Aに近い色（Aが全体的に青っぽいなら青、赤っぽいなら赤）をBの背景色にして、Bを書き出せばAに馴染むはずです。
例えば、Aが全体的に赤っぽい画像だとしたら、Bの背景色を赤にして書き出します。するとBには『赤い汚れ』ができます。しかし、Aも赤っぽいため、Bの『赤い汚れ』は目立たず奇麗にAと馴染むはずです。
ただし、私はイラレでweb用の画像を作成していません。
でも考え方は一緒だと思います。

お礼

ありがとうございます。
色々とチャレンジしてみます

回答No.4

noname#46849

原因についての例え話をします。
絵が描いてある紙から絵のみをはさみで切り取るというのを想像してみて下さい。
すると、余白がうまく切れなかったりします。原因はこういうことです。
つまり、背景という概念を持ったものから無理やり背景を切り離しているので、画像自体にゴミが残ってしまいます。
elm005さんに根気があれば1ピクセルずつゴミを取り除いていくのが良いと思います。

回答No.3

hiro-izm

>なぜ、そういった現象がおきてきますのでしょうか？

Photoshop と Illustrator を使用していると仮定します。
重ねる画像を作成します。

Illustratorでイラストを作成し、Photoshopで仕上げます。
この時のイラストと背景の境界を拡大して見てみると、
イラストと背景色が馴染むようにグラデーションしています。

Webページを作成時に画像を配置します。
このグラデ部分と背景色や画像の色の差があると汚く見える訳です。

解決方法として、
Photoshopでgifで保存する時にマット色を背景色と同じにして
保存すると軽減されます。

またはアイコン作成のようにドット単位でゴミを消して重ね合わせても
問題ない画像を作成でしょうか。

回答No.2

ao_

のせた画像を書き出す時に背景を透明にしていると思うんですが、作成した画像の背景が白だとアンチエリアスの関係でどうしても白いドットがのこります。
背景画像に近い色を背景色にしてその色を透明にして書き出せばきれいに馴染みます。

補足

ごめんなさい。
もう少し詳しくお願いします。

回答No.1

quads

アンチエイリアスの話でしょうか。

補足

すいません初心者なものでアンチエイリアスについてよくわからないのですがアンチエイリアスが原因の場合、回避はどのようにすればよいでしょうか？