主页
CSS 参考手册
CSS image-rendering 属性
trycss3_image-rendering
运行 ❯
×
更改方向
保存代码
更改主题
<!DOCTYPE html> <html> <head> <style> .image { height: 100px; width: 100px; image-rendering: auto; } .crisp-edges { image-rendering: -webkit-optimize-contrast; /* Chrome, Edge, Opera, and Safari */ image-rendering: crisp-edges; } .pixelated { image-rendering: pixelated; } .smooth { image-rendering: smooth; } .high-quality { image-rendering: high-quality; } </style> </head> <body> <h1>The image-rendering Property</h1> <p>image-rendering: auto;</p> <img class="image" src="/demo/images/smiley.gif" alt="Smiley" width="32" height="32"> <p>image-rendering: crisp-edges;</p> <img class="image crisp-edges" src="/demo/images/smiley.gif" alt="Smiley" width="32" height="32"> <p>image-rendering: pixelated;</p> <img class="image pixelated" src="/demo/images/smiley.gif" alt="Smiley" width="32" height="32"> <p>image-rendering: smooth;</p> <img class="image smooth" src="/demo/images/smiley.gif" alt="Smiley" width="32" height="32"> <p>image-rendering: high-quality;</p> <img class="image high-quality" src="/demo/images/smiley.gif" alt="Smiley" width="32" height="32"> <p>Original image: <img src="/demo/images/smiley.gif" alt="Smiley" width="32" height="32"></p> </body> </html>