1

背景画像をモバイル向けにレスポンシブにするために、2日間試しました。これは 1 つの長いホームページ (約 8000px) です。ページ全体のコンテンツには、div の親「background_div」があります。カバーのサイズを変更するか、タグを含めるかの両方を試しました。画像は拡大されたようにピクセル化され、コンテンツは反応しますが、背景の画像が頭痛の種になります。デバイスの幅を認識し、縮小し、8000px の長さのページに沿って引き伸ばされないように固定する必要があります。ここで何が問題なのか、誰かが私に考えを与えることができますか?

#background_div {
	background-image: url('home.jpg');
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}

/*It just won't scale to the divice width and height*/
<div id="background_div">

4

2 に答える 2

0

CSS2

画像を大きくする必要がある場合は、画像エディターで画像自体を編集する必要があります。

img タグを使用すると、サイズを変更できますが、画像を他のコンテンツの背景にする必要がある場合は、目的の結果が得られません (必要に応じて繰り返されません)...

CSS3 が力を解き放つ

これは、CSS3 で background-size を使用して行うことができます。

最新のブラウザーはすべてこれをサポートしているため、古いブラウザーをサポートする必要がない限り、これがその方法です。

サポートされているブラウザ:

Mozilla Firefox 4.0 以降 (Gecko 2.0 以降)、Microsoft Internet Explorer 9.0 以降、Opera 10.0 以降、Safari 4.1 以降 (webkit 532)、および Chrome 3.0 以降。

#background_div {
    /* width: will stretch to width / height of element */
    background-size: 100% 100%;
}
于 2016-06-29T02:19:52.860 に答える