图像绘制 | 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当向上缩放图像时,必须使用“最近邻居”或类似的算法,以便图像看起来由大像素组成。缩小时,这与“自动”相同。

optimizeQualityoptimizeSpeed存在于早期草案(并从其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

?

?

?

?

本文档系腾讯云云+社区成员共同维护,如有问题请联系 yunjia_community@tencent.com

扫描关注云+社区