CSS 属性

CSS 中的 image-rendering 属性用于控制浏览器应如何渲染或显示图像。它指定浏览器在放大或缩小图像时以及以不是图像固有尺寸倍数的尺寸显示图像时应使用的算法。

该属性可以具有以下值:

  • auto:默认值。浏览器选择图像渲染算法。

  • crisp-edges:浏览器保留图像的对比度、颜色和边缘，而不进行任何平滑或模糊处理。此值适用于放大或缩小的图像。

  • pixelated:浏览器在缩放图像时应用像素化效果，这可以提供复古或低分辨率的外观。

此属性可应用于背景图像、画布元素以及内联图像。

注意:并非所有浏览器或浏览器都支持图像渲染属性。可能对某些图像类型或渲染场景的支持有限。

适用范围

所有 HTML 元素。

DOM 语法

object.style.imageRendering = "pixelated";

CSS image-rendering 示例

以下示例演示如何使用具有不同值的image-rendering属性 -

<html>
<head>
<style>
   .demoImg {
      width: 300px;
      height: 200px;
      margin-right: 0.5in;
   }
</style>
</head>
<body>
   <h3>Original</h3>
   <img src="/css/images/scancode.png" alt="none">
   <h3>pixelated</h3>
   <img class="demoImg" style="image-rendering: pixelated;" src="/css/images/scancode.png" alt="pixelated">
   <h3>crisp-edges</h3>
   <img class="demoImg" style="image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges;" src="/css/images/scancode.png" alt="crisp-edges">
</body>
</html>