CSS解决图片缩放变模糊不清晰
位图在放大尺寸后都会变得模糊不清晰,但在网页中插入图片时,即使原图非常清晰,缩小尺寸后也可能变得模糊。
使用CSS的image-rendering属性,可以解决这一问题,使用前后对比如下图所示:
代码如下:
img {
image-rendering: -webkit-optimize-contrast; /* 针对WebKit引擎 */
image-rendering: crisp-edges; /* WebKit引擎现不支持该值,Firefox支持 */
}
仅需两条样式,缩小的图片就变得清晰了。