MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

image-rendering

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

概述

image-rendering CSS 属性决定浏览器对缩放图像采取的缩放算法.它适用于元素本身和有其他属性的图像.它对非缩放图像没有影响。

举个例子,如果一个尺寸为100×100px的图片,但作者有意把尺寸设置为200×200px (或50×50px), 然后图片会根据指定的算法缩小或放大到新尺寸.

初始值auto
适用元素all elements
是否是继承属性yes
适用媒体visual
计算值as specified
是否适用于 CSS 动画
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* 全局属性 */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;

属性

auto
默认值, 图像缩放时以外观优先。颜色过渡"平滑"算法是很合适的,比如双线性插值算法. 这种适合于照片. 从 1.9版本起 (Firefox 3.0), Gecko 使用双线性插值算法(高质量).
crisp-edges
图像缩放时,该算法保留图像的对比度和边缘.在不平滑过渡的颜色中引入模糊图像. 这常用于像素级作品.
pixelated
当缩放图像时, 使用"nearest neighbor"或类似算法, 所以图像将由大像素组成. 当缩小时,效果与'auto'值一样。
optimizeQuality 和 optimizeSpeed 存在于早前的草案中(来自对应的 SVG 属性) 与 auto 值是同义词.

正式语法

auto | crisp-edges | pixelated

例子

/* 应用于GIF和PNG图片; 防止边缘模糊 */

img[src$=".gif"], img[src$=".png"] {
                   image-rendering: -moz-crisp-edges;         /* Firefox */
                   image-rendering:   -o-crisp-edges;         /* Opera */
                   image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
                   image-rendering: crisp-edges;
                   -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
                 }

div { 
        background: url(chessboard.gif) no-repeat 50% 50%;
        image-rendering: -moz-crisp-edges;         /* Firefox */
        image-rendering:   -o-crisp-edges;         /* Opera */
        image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

实例

image-rendering: auto;

78% squares.gif 100% squares.gif 138% squares.gif缩小后 hut.jpg 放大后 blumen.jpg

image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)

78% squares.gif 100% squares.gif 138% squares.gif缩小后 hut.jpg 放大后 blumen.jpg

image-rendering: crisp-edges; (-webkit-optimize-contrast)

78% squares.gif 100% squares.gif 138% squares.gif 缩小后 hut.jpg 放大后 blumen.jpg

规范

Specification Status Comment
CSS Image Values and Replaced Content Module Level 3
image-rendering
Candidate Recommendation Initial definition

虽然最初与 SVG image-rendering 属性定义相近, 但现在有相当的差别.

浏览器兼容性

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本支持 (auto) (Yes) 3.6 (1.9.2) 未实现[1] 11.60 (Yes)
crisp-edges 未实现 3.6 (1.9.2)-moz 未实现 11.60-o (Yes) [2]
pixelated 41.0 未实现 (bug 856337) 未实现 26.0 (Yes) [3]
optimizeQuality, optimizeSpeed 未实现 3.6 (1.9.2) 未实现 11.60 (Yes)
特性 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本支持 41.0 ? ? ? ?

备注

[1] Internet Explorer 7 和 8 支持非标准的 -ms-interpolation-mode property 有两个值 (bicubic 和 nearest-neighbor):

  • 只能应用于图片 (JPG, GIF, PNG, ...)
  • 在 IE7 只能对无透明度的图片应用
  • 不能继承
  • IE7默认值: nearest-neighbor (低质量)
  • IE8默认值: bicubic (高质量)
  • IE9不支持这个非标准属性

[2] 支持一个非标准属性: -webkit-optimize-contrast.

[3] WebKit Nightly 支持, 见 bug

Canvas 可以通过人工方式支持 crisp-edge/optimize-contrast属性.

文档标签和贡献者

 此页面的贡献者: Go7hic, L9m
 最后编辑者: Go7hic,