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)">

也就是说，它使用一个常见的图像。我在 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);
}
}

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

尽管使用最小宽度，所有三个规则都会匹配。您应该改用 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 回答