<!DOCTYPE html>
<html>
<head>
<style>
.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;
}
</style>
</head>
<body>
<h1>image-rendering 属性</h1>
<p>image-rendering: auto;</p>
<img class="image" src="/i/pic/smiley.png" alt="Smiley" width="48" height="48">
<p>image-rendering: crisp-edges;</p>
<img class="image crisp-edges" src="/i/pic/smiley.png" alt="Smiley" width="48" height="48">
<p>image-rendering: pixelated;</p>
<img class="image pixelated" src="/i/pic/smiley.png" alt="Smiley" width="48" height="48">
<p>image-rendering: smooth;</p>
<img class="image smooth" src="/i/pic/smiley.png" alt="Smiley" width="48" height="48">
<p>image-rendering: high-quality;</p>
<img class="image high-quality" src="/i/pic/smiley.png" alt="Smiley" width="48" height="48">
<p>原始图像：<img src="/i/pic/smiley.png" alt="Smiley" width="48" height="48"></p>
</body>
</html>