Справочник по 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
