如何通过媒体查询使用 CSS3 加载图像？答案

【问题标题】：How to load images with CSS3 via media queries?如何通过媒体查询使用 CSS3 加载图像？
【发布时间】：2013-03-22 03:29:20
【问题描述】：

我在这里注意到这个关于 stackoverflow 的问答：how to specify a different image in css depending if the user visits on a desktop or a mobile browser

他的 HTML：

<img src="image.jpg"
     data-src-960px="image-960px.jpg"
     data-src-1260px="image-1260px.jpg"
     alt="">

而 CSS 是：

img[data-src-960px] {
            content: attr(data-src-960px, url);
        }

我正在尝试将其合并到网页中，但失败得很惨......

我的 HTML：

<div class="container">
    <div><img src="images/header.jpg" data-src-mobile="images/header_mobile.jpg" alt="Philadelphia" /></div>
</div>

我的 CSS：

img[data-src-mobile] {
    content: attr(data-src-mobile, url) !important;
}

我有一个专门针对移动设备的样式表。但这根本行不通。它总是加载：images/header.jpg

attr 中的 url 参数是否应该在其中包含某些内容？我尝试将url 替换为../images/header_mobile.jpg，但这也不起作用。

你如何使用它？我似乎根本无法在互联网上找到更多细节...... :(

这里值得参考一些人说这有效：

Using CSS/HTML to Make a Responsive Website in 3 Easy Steps

Responsive images using CSS3

【问题讨论】：

看了this MDN doc，我想你可能误解了attr()的意思……
@Passerby - 好的，所以我从那里删除了 url，它仍然没有加载。图像永远不会加载。是什么赋予了？由于我有更多时间进行搜索，因此我在网上看到了几个引用此内容的地方。但他们都做同样的事情！而且它不起作用！
我认为attr() 用于向 CSS 属性返回值，而不是修改元素的属性。 Example.
哇，这简直太愚蠢了，这就是我通过 jsfiddle 所做的：jsfiddle.net/t5nCu/1 我想这是我能做到的最好的事情吗？哎呀，这只是愚蠢的，为什么有人告诉你你可以用这种方式改变图像，而你不能？网上有大量的参考资料，人们说它们会起作用……太疯狂了！
我认为这就是 attr() 的用途：jsfiddle.net/t5nCu/2

标签： css mobile media-queries

【解决方案1】：

使用min-width、max-width、:after 和content:url。例如：

@media screen and (min-width: 961px)
{
a:after {content:url("http://www.eclipse.org/eclipse.org-common/themes/solstice/public/images/logo/eclipse-800x188.png");}
}

@media screen and (max-width: 960px){
a:after {content:url("http://www.eclipse.org/eclipse.org-common/themes/solstice/public/images/logo/eclipse-426x100.png");}
}

&lt;a tabindex="1"&gt;&lt;/a&gt;

参考文献

【讨论】：