CSS: Использование атрибутов данных в качестве содержимого URL

Так у меня есть DIV, что позволяет мне показывать QR-код текущего URL страницы: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

Обратите внимание, что свойства высоты и ширины здесь фактически не изменяют размер вставленного изображения. См. Http://stackoverflow.com/questions/14978807/can-you-apply-a-width-to-a-before-after-pseudo-element-contenturlimage – BoltClock

@BoltClock: Спасибо, обновлено. – JROB

Это предложена функция для attr() в css-values-3. CSS будет выглядеть следующим образом:

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

К сожалению there are no known implementations, так что до сих пор не представляется возможным.

источник

2016-05-21 13:36:51 BoltClock

CSS: Использование атрибутов данных в качестве содержимого URL

ответ

Смежные вопросы