Question

概念很简单，我有一个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)">

那说它使用一个共同的图像。我在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) }

请帮忙。我试过了。 `

Answer 1

@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);
}
}

这将根据屏幕大小设置home-welcome div的背景图像。

虽然使用最小宽度，但所有三个规则都匹配。你应该使用max-width。

编辑：我接受关于max-width的陈述。取决于你想要达到的目标。只要记住，当多个规则匹配并且最后声明的规则获胜时，css规则级联。明智地使用！重要。

对应的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。

根据屏幕更改不同的背景图像： - css HTML5 Gallery

1 个答案: