CSS image-rendering 属性
示例
显示可用于图像缩放的不同算法
.image {
height: 100px;
width: 100px;
image-rendering: auto;
}
.crisp-edges {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
.pixelated {
image-rendering: pixelated;
}
.smooth {
image-rendering: smooth;
}
.high-quality {
image-rendering: high-quality;
}
亲自试一试 »
定义和用法
The image-rendering 属性指定用于图像缩放的算法类型。
注意：此属性对未缩放的图像没有影响。
| 默认值 | auto |
|---|---|
| 继承 | 是 |
| 可动画 | 否。 了解有关可动画的信息 |
| 版本 | CSS3 |
| JavaScript 语法 | object.style.imageRendering="pixelated" 试一试 |
浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| image-rendering | 41.0 | 79.0 | 65.0 | 10.0 | 28.0 |
Chrome、Edge 和 Opera 对 crisp-edges 值使用了备用名称：-webkit-optimize-contrast。
CSS 语法
image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| auto | 让浏览器选择缩放算法。这是默认值 | 演示 ❯ |
| smooth | 使用一种可以使图像中的颜色平滑的算法 | 演示 ❯ |
| high-quality | 与 smooth 相同，但更偏向于更高质量的缩放 | 演示 ❯ |
| crisp-edges | 使用一种可以保留图像对比度和边缘的算法 | 演示 ❯ |
| pixelated | 如果图像放大，则使用最近邻算法，因此图像看起来像是由大型像素组成的。如果图像缩小，则与 auto 相同 | 演示 ❯ |
| initial | 将此属性设置为其默认值。 了解有关initial的信息 | |
| inherit | 从其父元素继承此属性。 了解有关inherit的信息 |
