атрибут содержимого элементов img

Осматривая инструменты Chrome Dev, я заметил следующий фрагмент CSS:

img {
    content: url(image-src.png);
}

который отлично работает в Chrome (см. скриншот ниже).

Chrome Dev Tools

Это позволяет мне определить атрибут src тега & lt; img & gt; тег с помощью CSS. Не работает в Firefox. До сих пор я думал, что напрямую изменить атрибут src через css невозможно, и я не нашел никого, кто бы говорил об этом.So, is this just a proprietary addition in Chrome or is Chrome implementing a W3C draft or something comparable I am not aware of?

Ответы на вопрос(2)

Решение Вопроса

content property as defined in CSS 2.1 относится к:before а также:after только псевдоэлементы. По правилам CSS вы можете указать любое свойство для любого элемента, но спецификации имеют ограничения на то, какие свойства & # x201C; применяются к & # x201D; (т.е. влияют на) различные элементы.

Модуль сгенерированного и замененного контента CSS3, рабочий проект, описываетcontent property как применяется ко всем элементам. У него есть пример замены содержимогоh1 элемент за изображением, и, конечно же, то же самое можно сделать сimg элемент.

Но это всего лишь рабочий проект. Обычные ресурсы по статусу реализации CSS,QuirksMode.org CSS информация а такжеCaniuse.comне указывайте ситуацию; они только описывают поддержкуcontent за:before а также:after (что довольно универсально, за исключением IE 7 и более ранних версий.

 24 июн. 2012 г., 13:50
Аааа, я этого не видел. Спасибо!
 Maximilian Hils24 июн. 2012 г., 19:10
Спасибо за этот отличный ответ!
 24 июн. 2012 г., 13:49
@BoltClock, WD не работал с 2003 года, но в обзорном документе W3Cw3.org/Style/CSS/current-work.en.html это в & # x201C; перезаписи & # x201D; раздел, а не & # x201C; Заброшенный & # x201D ;. Это проект редактора от 17 апреля 2012 года, хотя я не знаю, как его содержание связано с проектом 2003 года. Я бы ожидал поддержкиcontent для нормальных элементов становятся более распространенными; кроме Chrome, Opera и Safari уже поддерживают его.
 24 июн. 2012 г., 12:10
Мало того, что это просто WD, но он, кажется, заброшен. Я понятия не имею, куда идут эти реализации или собираются ли они когда-либо полностью реализовывать этот модуль.

Now you can do that: http://chabada.esy.es/tests/0004.html

<style>
  .redcross {
    background: transparent url('redcross.png') no-repeat;
    display: block;
    width:  24px;
    height: 24px;
    }
</style>

<img class="redcross">
 04 сент. 2014 г., 12:34
Но вам нужно знать размеры изображения в пикселях, иначе оно будет обрезано.

Ваш ответ на вопрос