1

我需要响应 css 背景图像。这些哪个更好？或者有什么更好的方法？

1：添加img tag

HTML：

<body>
    <img src="largeimage.jpg">
    <img class="smallscreen" src="smallimage.jpg>
</body>

CSS：

img.smallscreen { display: none; }
@media only screen and (max-width: 320px) {
    img { 
        display: none; 
    }
    img.smallscreen { 
        display: inline; 
    }
}

2：将css图片背景添加到div标签中

HTML：

<body>
    <div id="image"></div>
</body>

CSS：

#image { 
    background-image: url(largeimage.jpg); 
}
@media only screen and (max-width: 320px) {
    #image { 
        background-image: url(smallimage.jpg); 
    }
}
4

2 回答 2

2

您正在那里加载两张图片，所以您不认为只对图片提出一个请求会更好吗？所以在这种情况下，如果图像是整个页面的背景，你可以使用类似coverfx 的东西：

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

或者，如果确实需要像您所拥有的那样在 div 中，它可能会像这样：

img.bg {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) {
  img.bg {
    left: 50%;
    margin-left: -512px;
  }
}

资源

浏览器支持：

Firefox (Gecko) Mozilla Firefox 4.0+ (Gecko 2.0+) 完全支持 background-size 属性。在 4.0 版之前，-moz-background-sizeFirefox 3.6 (Gecko 1.9.2) 支持，但是从 4.​​0 开始不再支持。

Internet Explorer Microsoft Internet Explorer 9.0+ 完全支持 background-size 属性。在 9.0 版之前，Internet Explorer 不支持背景大小。

Opera Opera 10.0+ 完全支持 background-size 属性。在 10.0 版之前，-o-background-sizeOpera 9.5 支持，但是 Opera 的实现与 CSS3 规范之间存在一些差异。

Safari / Chrome (Webkit) Safari 4.1+ (webkit 532) 和 Chrome 3.0+ 都完全支持 background-size 属性。

于 2013-09-11T12:58:26.517 回答
1

绝对是第二个。全部在 CSS 中完成。虽然你可以只在 body 上设置背景，没有 div，除非有理由不这样做。您只需将#image 替换为body。这很好，没有比你已经拥有的更好的方法了。

于 2013-09-11T12:49:35.160 回答