css - 使用背景图像而不是具有响应式设计的图像有什么缺点吗？

Question

为一个糟糕的标题道歉。我一直在自学响应式设计技术，我阅读的所有博客似乎都在谈论为移动平台下载桌面大小的图像、加载多个图像或需要 javascript 等问题。 I wrote a little fiddle它使用媒体查询和 padding-top 宽高比技巧进行动态调整大小。它工作正常，并在启动时加载正确的图像(至少此时在 Chrome 中)，并正确地上下移动(您必须打开网络监视器才能看到)。

我很高兴它能工作，但是我担心在我的页面上使用它 -- 这对我使用 google spider 有任何严重影响吗(因为它们是背景图像而不是图像)。有什么我明显遗漏的注意事项吗？

代码非常简单:

HTML:

<!-- padding top equal to aspect ratio -->
<div style="padding-top:75%;width:100%;" id="image"></div>

CSS:

html, body { margin: 0; padding: 0; }

#image {
  background-repeat: no-repeat;
  background-size:   100%;
  border: 1px solid #000;
}

@media screen and (max-width: 320px) { 
    body { width: 240px; margin: 0 auto; }
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec_n.jpg');
}}
@media screen and (max-width: 500px) {
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec.jpg');
}}
@media screen and (max-width: 640px) {
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec_z.jpg');
}}
@media screen and (min-width: 641px) {
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec_b.jpg');
}}

Answer 1

将背景图像用于实际内容图像在语义上是不正确的。但是，响应式地设置背景图像的样式会更容易。这完全取决于您所处理的情况。