图像绘制 | image-rendering
这是一项实验技术
在使用此产品之前，请仔细检查浏览器兼容性表。
image-rendering 提供一个提示，关于算法应使用缩放图像浏览器。
/* Keyword values */
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;该属性适用于元素本身，以及元素的其他属性中提供的任何图像。它对未缩放的图像没有影响。例如，如果图像的自然尺寸是100×100像素，但页面作者将其尺寸指定为200×200px（或50×50px），则图像将使用指定算法放大（或缩小）到新尺寸。由于用户交互（缩放），缩放也可能适用。
Canvas可以通过手动图像数据操作为清晰边缘/优化对比度提供后备解决方案。
初始值 | auto |
|---|---|
应用于 | all elements |
是否继承 | yes |
适用媒体 | visual |
计算值 | as specified |
Animation type | discrete |
规范顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
取值
auto默认值，应使用最大化图像外观的算法来缩放图像。特别地，“平滑”颜色的缩放算法是可接受的，例如双线性插值。这适用于照片等图像。从版本1.9（Firefox 3.0）开始，Gecko使用双线性重采样（高质量）。
crisp-edges必须使用保留图像中的对比度和边缘的算法来缩放图像，并且不会在处理中使图像变得光滑或模糊。这是用于图像，如像素艺术。
pixelated当向上缩放图像时，必须使用“最近邻居”或类似的算法，以便图像看起来由大像素组成。缩小时，这与“自动”相同。
optimizeQuality和optimizeSpeed存在于早期草案（并从其SVG对应未来）定义为同义词的auto值。
规范语法
auto | crisp-edges | pixelated例子
/* applies to GIF and PNG images; avoids blurry edges */
img[src$=".gif"], img[src$=".png"] {
image-rendering: crisp-edges;
}div {
background: url(chessboard.gif) no-repeat 50% 50%;
image-rendering: crisp-edges;
}现场示例
image-rendering: auto;
78%
100%
138%
downsized
upsized
image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)
78%
100%
138%
downsized
upsized
image-rendering: crisp-edges; (-webkit-optimize-contrast)
78%
100%
138%
downsized
upsized
规范
Specification | Status | Comment |
|---|---|---|
CSS Image Values and Replaced Content Module Level 3The definition of 'image-rendering' in that specification. | Candidate Recommendation | Initial definition |
Note: Though initially similar to the SVG image-rendering attribute, the values are quite different now.
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
Basic support (auto) | (Yes) | No support | 3.6 (1.9.2) | No support1 | 11.60 | (Yes) |
crisp-edges | No support | No support | 3.6 (1.9.2)-moz | No support | 11.60-o | (Yes)3 |
pixelated | 41.0 | No support | No support2 | No support | 26.0 | (Yes)4 |
optimizeQuality, optimizeSpeed | No support | No support | 3.6 (1.9.2) | No support | 11.60 | (Yes) |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Basic support | 41.0 | ? | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
