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

Question

概念很简单，我有一个 html5 页面并且它是响应式的，只是背景图像不会随着屏幕尺寸而改变:现在代码是:

<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) { 背景图片: url(bg-1024.jpg) }
@media (min-width:1024px) { 背景图片: url(bg-1024.jpg) }
@media (min-width:1280px) { 背景图片: 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);
}
}

这将根据屏幕尺寸设置欢迎回家div的背景图像。

虽然使用最小宽度，但所有三个规则都会匹配。您应该改用最大宽度。

编辑:我收回关于最大宽度的声明。取决于您想要实现的目标。请记住，当多个规则匹配并且最后声明的规则获胜时，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。