渲染放大的图片image-rendering笔记


image-rendering: pixelated,控制浏览器如何渲染放大的图片,比如图像的自然尺寸为100×100像素,但网页指定其尺寸不为100*100像素时,关闭浏览器标准的平滑缩放(通常为双线性内插法),使用其他算法(通常为最近邻法)。使用场景:游戏适配、票据和QR code展示等。而且这个属性可以应用于img,canvas和background-image中。

Syntax

image-rendering: auto;
//使用默认算法,即将图片色彩进行平滑缩放,不同的浏览器采用的算法不一
image-rendering: crisp-edges;
//使用算法达达到在绽放时保持对比度和边缘,在加工时不平滑色彩和使用模糊
image-rendering: pixelated;
//当图片放大时,单纯地去放大像素点,缩小时与auto效果一样

/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;

代码实例:

image-rendering: auto;

78% 1 100% 1 138% 1

image-rendering: pixelated;

78% 1 100% 1 138% 1

image-rendering: crisp-edges;

78% 1 100% 1 138% 1


注:本文转载自练小习的前端技术笔记,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除。

上一篇 下一篇