2016-04-13 7 views
0

現在、一部の画面解像度をカバーする画像がありますが、画面解像度が画像より大きい場合は、各ピクセルで大きくなります。白、私はそのバックグラウンドイメージの背後にある色が欲しいので、醜く見えません。私の現在のコードは背景のためのimgタグであり、CSSは100%まで拡大しますが、画面の解像度が画像の解像度よりも大きければ、問題が発生します。バックグラウンド画像に負荷がかかっていない場合は代替の背景があります

+0

[jQuery/Javascriptで壊れた画像を置き換える]の複製があります(http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images) – AbhiNickz

+0

これにはjavascriptを使用する必要があります。 – Gintoki

答えて

1

divに背景画像を設定するのではなく、背景画像としてimgタグを使用する具体的な理由はありますか?あなたはかなり簡単にこれを行うことができるので。選択図】図-divのは、あなたのIMGの代わりになり

.background-div { 
    width: 100%; 
    height: 100%; 
    background: url(your_image_url) no-repeat; 
    background-size: cover; 
    background-color: #e3e3e3; 
} 

...これは、文書のbody、または何である可能性があります。これは、背景全体をカバーするコンテナdivです。

バックグラウンドの背景色は#e3e3e3で、background-size: coverは常に画像を拡大して画面に表示するため、その色は見えません。 containを代わりに使用することもできます。これにより、イメージの縮尺が変わり、イメージが届かない場所の背景色が表示されます。

+1

私のために働いてくれてありがとう、私は "バックグラウンド:緑;"として設定されていないフォールバックを持っていたしかし、それは明らかに「背景色:緑色」でした。それは働くだろう、助けてくれてありがとう。 –

0

イメージの親divを見つけて、スタイルシート属性を追加します。

それはこの

<div class="parent" style="background-color: #000000;height: 100%;width: 100%;"> 
<img src="your image url" class="image" alt="alt" title="your title"/> 
</div> 

のattrスタイル=のようになります "背景色:#000000;" divに黒の背景色を与えます。

style.cssファイルのクラス名で背景色を設定することもできます。またはファイル名を何にしたか。

.parent { 
    background: #000; 
    height: 100%; 
    width: 100%; 
} 

.parent img { 
    max-width: 100%; 
} 

これはあなたの検索のためのものです。そうでない場合は、さらに詳細を記入してください。おそらくあなたの現在のコードの構造を表示します。

関連する問題