CSS 图像渲染属性-之路教程

语法

image-rendering: auto | crisp-edges | pixelated | initial | inherit;

图像渲染属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .pixelated {
        image-rendering: pixelated;
      }
      .resize {
        width: 45%;
        clear: none;
        float: left;
      }
      .resize:last-of-type {
        float: right;
      }
      .resize img {
        width: 100%;
      }
      img {
        margin-bottom: 20px;
        width: 100%;
      }
      .oroirnal img {
        width: 20%;
      }
      body {
        background-color: #ccc;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Image-rendering 属性示例</h2>
    <div class="oroirnal">
      <p>Oroirnal image size:</p>
      <img src="/onitroad.png" alt="onitroad logo" />
    </div>
    <div class="resize">
      <p><code>image-rendering: auto</p>
      <img src="/onitroad.png" alt="onitroad logo" />
    </div>
    <div class="resize">
      <p><code>image-rendering: pixelated</p>
      <img class="pixelated" src="/onitroad.png" alt="onitroad logo" />
    </div>
  </body>
</html>

CSS image-rendering 属性值说明

值	描述
auto	一种最大化图像外观的标准算法。这是此属性的默认值。
crisp-edges	保留图像的值而不会平滑或者模糊。
pixelated	浏览器通过使用最近邻缩放来保留其像素化样式。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

CSS 图像渲染属性

image-rendering 属性设置图像缩放算法。

默认情况下，每个浏览器都会对缩放后的图像应用锯齿来防止失真，但如果我们想保留图像的原始像素化形式，则会出现问题。

有时，我们可以将清晰边缘与图像渲染属性的像素化值结合起来，以便为它们提供一些后备。

初始值	auto
应用于	所有元素。
继承	可继承
可动画的	离散的。
版本	CSS3.
DOM 语法	object.Style.imagerEndering =“pixelated”;

日期：2020-06-02 22:14:35 来源：oir作者：oir

←CSS 连字符属性

CSS @import 规则→

语法

图像渲染属性示例：

CSS image-rendering 属性值说明

目录