Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Пользовательский интерфейс : image-rendering

смотрим также

Материал из Справочник Web-языков

Перейти к: навигация, поиск


Содержание

image-rendering

Определяет метод обработки масштабируемых изображений.

Синтаксис

image-rendering: auto | inherit | optimizeSpeed | optimizeQuality | -moz-crisp-edges

Используемые значения

auto
Значение по умолчанию. Зависит от браузера пользователя. С версии 1.9 (Firefox 3.0), в Gecko используется билинейная дискретизация.
optimizeQuality
Определяют, что браузер пользователя должен обработать изображение с лучшим качеством в ущерб скорости.
optimizeSpeed
Определяют, что браузер пользователя должен обработать изображение с наибольшей скоростью в ущерб качеству.
-moz-crisp-edges
Расширение Mozilla для CSS. Вообще, Gecko (Firefox) используется метод дискретизации по ближайшему соседнему. Используйте это значение, чтобы запретить режим масштабирования sharp edges getting blurry (четкие сглаженные границы).

Значением по умолчанию является auto. Атрибут Каскадных таблиц стилей (CSS) наследуется.

Замечания

В настоящее время значения auto и optimizeQuality свойства image-rendering эквивалентны. Для обоих используется билинейная дискретизация. Также эквивалентны optimizeSpeed и -moz-crisp-edges. В них используется метод дискретизации по ближайшему соседнему.

Различные режимы масштабирования применяются к:

  • изображениям
  • фоновым рисункам
  • элементу HTML5 <video>
  • элементу HTML5 <canvas>

Примеры

В примерах показано как применять свойство image-rendering к различным элементам и объектам.

img  { 
       image-rendering: optimizeQuality;  /* Firefox 3.6 */
       -ms-interpolation-mode: bicubic;   /* Internet Explorer 7.0+ */
     }
/* применение к изображениям форматов  GIF и PNG*/

img[src$=".gif"], img[src$=".png"] {

                   image-rendering: -moz-crisp-edges;         /* Firefox 3.6 */
                   -ms-interpolation-mode: nearest-neighbor;  /* IE 7+ */
                 }
/* будет применено ко всем рисункам, включая фоновые, и видео-объектам в документе*/

html  { image-rendering: -moz-crisp-edges; }
div { 
        background: url(chessboard.gif) no-repeat 50% 50%;
        image-rendering: -moz-crisp-edges;
}
video { image-rendering: optimizeSpeed; }

Стандарты

Это свойство описано в SVG 1.1 Painting #image-rendering

Поддерживаемые браузеры

Internet Explorer 7.0, 8.0

Firefox 3.6

Смотрите также

-ms-interpolation-mode

Ссылки на источники

https://developer.mozilla.org/en/CSS/image-rendering

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="http://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования