3

コンセプトはシンプルです。私はhtml5ページを持っていて、レスポンシブです.bgroundの画像だけが画面サイズで変化しません.今のコードは次のとおりです.

<div id="home-gallery" class="gallery-container fullscreen">
<section id="home-welcome" class="slide-1 gallery-slide background-cover" style="background-image:url(static/img/home/image1.jpg)">
.....

<section id="home-campaigns" class="slide-2 gallery-slide background-cover" style="background-image:url(static/img/home/image2.jpg)">

それは、1つの一般的なイメージを使用して言った. 私がCSSでやろうとしたことは次のとおりです。

@media (min-width:800px) { background-image: url(bg-800.jpg) }
@media (min-width:1024px) { background-image: url(bg-1024.jpg) }
@media (min-width:1280px) { background-image: url(bg-1280.jpg) }

style="background-image:しかし、プロパティを CSS コードに関連付ける方法がわかりません。私は書くべきですか：

<section id="home-campaigns" class="slide-2 gallery-slide background-cover" style="background-image">

そしてcssで#home-welcome background-image @media (min-width:800px) { background-image: url(bg-1024.jpg) } @media (min-width:1024px) { background-image: url(bg-1024.jpg) } @media (min-width:1280px) { background-image: url(bg-1280.jpg) }

助けてください。私は試した。`

4

1 に答える 1

2 
@media (min-width:800px) { 
#home-welcome{
background-image: url(bg-800.jpg);
}
}
@media (min-width:1024px) {
#home-welcome{
 background-image: url(bg-1024.jpg);
}
}
@media (min-width:1280px) {
#home-welcome{
 background-image: url(bg-1280.jpg);
}
}

これにより、画面サイズに応じてホームウェルカム div の背景画像が設定されます。

min-width を使用しても、3 つのルールはすべて一致します。代わりに max-width を使用してください。

編集： max-width についての私の声明を取り戻します。何を達成したいかによります。複数のルールが一致し、最後に宣言されたルールが勝つと、css ルールがカスケードすることに注意してください。!important を賢く使用してください。

対応html

<section id="home-welcome" class="slide-2 gallery-slide background-cover">

これもチェックしてください http://www.w3schools.com/cssref/css3_pr_background-size.asp

background-size:contain画像がコンテナdivに収まるように使用できます。

于 2013-02-13T23:04:53.300 に答える