Странное поведение тега IMG

[Evkaky]

Тег <img> по умолчанию строчно-блочный (display: inline-block)

Я прописываю картинку в этом теге так: <img src="ololo.png">

Потом в стилях прописываю ему что-то типа:

padding: 20px;
background-color: red;

И что же я вижу...из под самой картинки на 20 пикселей с каждой стороны (мой паддинг) выглядывает красный цвет. Т.е. такое впечатление, что для самой картинки backgound-clip в значении content-box, а для цвета (background-color: red) в значении padding-box. Кстати, манипуляция со значениями backgound-clip и backgound-origin в теге <img> абсолютно ни к чему не приводит.

В любых других элементах (строчно-блочных и блочных. В таблицах и строчных элементах не проверял еще) такого добиться невозможно. Каким бы я не устанавливал backgound-clip - картинка в этом элементе (background-image) ВСЕГДА И ПОЛНОСТЬЮ перекрывает фоновый цвет этого же эелемента(background-color).

Это специфика тега <img>, это глюк, или можно как-то для любого элемента добиться того, что бы для картинки и для фонового цвета были разные backgound-clip (другими словами - из под картинки торчит ее фоновый цвет в паддинге, а сама картинка только в контент-боксе)?

И еще, не совсем по теме. Правда, что задание атрибутов height и width в теге <img> ускоряет обработку этой картинки браузером? Мол если задать эти значение вручную - то браузеру не надо расчитывать самому размеры загружаемой картинки...

А, походу разобрался.

Нужно сделать размер блока БОЛЬШЕ, чем размер картинки и при этом background-origin установить в значение content-box, а background-clip в padding-box.

Тогда эффект тот же, что в теге <img>.

Запутано немного.

Ладно, в любом случае, второй вопрос остается актуальным для меня)

Edited December 12, 2012 by Evkaky

[Viper]

И еще, не совсем по теме. Правда, что задание атрибутов height и width в теге <img> ускоряет обработку этой картинки браузером? Мол если задать эти значение вручную - то браузеру не надо расчитывать самому размеры загружаемой картинки...

Это и многое другое - "Скорость рендеринга страниц: исследования, замеры, автоматизация":

_http://video.yandex.ua/users/ya-events/view/275/?cauthor=melik-alexey&cid=1

Запутано немного.

Понятное дело будет запутанным... так извращать с тегом IMG...

[SelenIT]

Тег <img> по умолчанию строчно-блочный (display: inline-block)

Неправда. По умолчанию он display: inline, но replaced (замещаемый). Поэтому, да, ведет себя похоже на инлайн-блоки (как "atomic inline-level box").

Т.е. такое впечатление, что для самой картинки backgound-clip в значении content-box

Я вам больше скажу — для img можно задать отдельный background-image! Потому что картинка в src вообще не имеет отношения к фону.

можно как-то для любого элемента добиться того, что бы для картинки и для фонового цвета были разные backgound-clip

В современных браузерах — почему бы нет? Но небезгранично.

Правда, что задание атрибутов height и width в теге <img> ускоряет обработку этой картинки браузером?

Неправда. Но теоретически уменьшает кол-во необходимых reflow/repaint и этим уменьшает время отрисовки страницы.