ここで、stackoverflow に関するこの Q & A に気付きました 。
彼の 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
そこに何かがあるはずのurlパラメーターはありますか？attrに置き換えてみましurlたが../images/header_mobile.jpg、それでもうまくいきません。
これをどのように使用しますか？これについては、インターネット上で詳細を見つけることができないようです... :(
ここで価値があるのは、これが機能すると言っている人々への参照です。