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

Question

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

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

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

Это позволяет мне определить атрибут ГКЗ в <IMG> тег с помощью CSS. Не работает в Firefox. До сих пор я думал, что невозможно напрямую изменить атрибут src через css, и я не нашел, чтобы кто-то говорил об этом. Итак, это просто запатентованное дополнение в Chrome или Chrome, реализующий проект W3C или нечто подобное, о котором я не знаю?

Answer 1

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

CSS3 Generated and Replaced Content Module, рабочий проект, описывает content property как применимый ко всем элементам. Он имеет пример замены содержимого элемента h1 изображением, и, конечно же, это может быть сделано с элементом img.

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

Answer 2

Теперь вы можете сделать это:.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">