CSS：コンテンツのURLなどのデータ属性を使用して

だから私は、私は、現在のページのURLのQRコードを表示することができますdiv要素があります。CSS：コンテンツのURLなどのデータ属性を使用して

.page-qr:before { 
    content: url(https://chart.googleapis.com/chart?cht=qr&chs=100x100&chl=<?php echo current_page(); ?>?choe=UTF-8); 
    height: 100px; 
    width: 100px; 
}

などに使用：

<div class="page-qr"> </div>

明らかにし、現在のURLをオンザフライで取得するには、このCSSスタイルをマイページの<head>に入れなければなりません。私はスタイルシートに移動しようとしています。

私はURLを指定するには、データの属性を使用するためのアイデアを持っていた：

<div class="page-qr" data-url="https://chart.googleapis.com/chart?cht=qr&chs=100x100&chl=<?php echo current_page(); ?>?choe=UTF-8"> </div>

だから、私の質問があり、それはスタイルシートでcontent:url()とattr(data-url)の利用を倍増することは可能でしょうか？

.page-qr:before { 
    content: url(attr(data-url)); /* Doesn't work, but you get the idea */ 
    height: 100px; 
    width: 100px; 
}

出典

2016-05-21 JROB

ここで、heightプロパティとwidthプロパティは、実際に挿入されたイメージのサイズを変更しないことに注意してください。 http://stackoverflow.com/questions/14978807/can-you-apply-a-width-to-a-before-after-pseudo-element-contenturlimage – BoltClock

を参照してください。@BoltClock：ありがとうございました。 – JROB

これはcss-values-3でattr()ために提案された機能です。 CSSは次のようになります。残念ながらthere are no known implementations

.page-qr:before { 
    content: attr(data-url url); 
    height: 100px; 
    width: 100px; 
}

ので、これは可能ではありません。

出典

2016-05-21 13:36:51 BoltClock

CSS：コンテンツのURLなどのデータ属性を使用して

答えて

関連する問題