Question

我需要响应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); 
    }
}

Answer 1

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

的内容

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

Source

浏览器支持：

Firefox（Gecko） Mozilla Firefox 4.0+（Gecko 2.0+）完全支持background-size属性。在4.0版之前，Firefox 3.6（Gecko 1.9.2）支持-moz-background-size，但从4.0开始不再支持。

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

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

Safari / Chrome（Webkit） Safari 4.1+（webkit 532）和Chrome 3.0+都提供对background-size属性的完全支持。

Answer 2

绝对是第二个。在CSS中完成所有操作。虽然你可以在没有div的情况下设置身体的背景，除非有理由不这样做。你只需要用body替换#image。这很好，并没有比现有的更好的方式。

响应css背景图像的更好方法

2 个答案: