CSS3替換圖像src與另一個attr

我有lazyload在我的網站上工作。但是，如果有人想打印網頁，然後像圖像打印出來，而不是加載微調器。CSS3替換圖像src與另一個attr

這裏是我的圖片看起來像

<img class="lazy" data-original="images/gd-0007.jpg" src="../../img/loadingplaceholder.gif">

所以使用@media打印{}我還想使SRC一樣的數據原件。

試過這個，但沒有運氣。（這樣做是在樣式表，看看它是否工作）

@media print { 
.lazy { 
    src: attr(data-original); 
} 
}

這裏是我計上心來： http://andydavies.me/blog/2012/08/13/what-if-we-could-use-css-to-manipulate-html-attributes/

這裏是一個的jsfiddle如果有幫助： http://jsfiddle.net/gXpzb/

來源

2013-07-26 Zackskeeter

的問題是，這只是一個作者認爲有一天在CSS中會很好的想法，目前這不被支持。

沒有src屬性要在CSS中設置，但content屬性，但它似乎並不接受使用attr()分別獲取的URL，它似乎尚未被任何瀏覽器實現。從the specs來看，這樣的事情會在未來是可能的：

content: attr(data-original url);

參見：Css Content, Attr and Url in the same sentence

所以，據我可以告訴你，就目前必須堅持顯式定義的網址CSS，類似於

<img class="lazy gd0006" src="http://beresponsive.net/tcex/img/loadingplaceholder.gif"> 
<img class="lazy gd0007" src="http://beresponsive.net/tcex/img/loadingplaceholder.gif"> 
<img class="lazy gd0008" src="http://beresponsive.net/tcex/img/loadingplaceholder.gif"> 
... 

@media print { 
    .lazy.gd0006 { 
     content: url('/images/gd-0006.jpg'); 
    } 
    .lazy.gd0007 { 
     content: url('/images/gd-0007.jpg'); 
    } 
    .lazy.gd0008 { 
     content: url('/images/gd-0008.jpg'); 
    } 
    ... 
}

來源

2013-07-26 14:33:13 ndm

CSS3替換圖像src與另一個attr

回答

相關問題