1. 首页
  2. web前端

渲染放大的图片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% 渲染放大的图片image-rendering笔记 100% 渲染放大的图片image-rendering笔记 138% 渲染放大的图片image-rendering笔记

image-rendering: pixelated;

78% 渲染放大的图片image-rendering笔记 100% 渲染放大的图片image-rendering笔记 138% 渲染放大的图片image-rendering笔记

image-rendering: crisp-edges;

78% 渲染放大的图片image-rendering笔记 100% 渲染放大的图片image-rendering笔记 138% 渲染放大的图片image-rendering笔记

原创文章,作者:aike

本文来自投稿,不代表 怪小克 立场,如若转载,请注明出处:https://wangchaoke.cn/?p=1672

本站发布的内容若侵犯到您的权益,请邮件联系 860095347@qq.com 删除,我们将及时处理!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

860-095-347

在线咨询:点击这里给我发消息

邮件:860095347@@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code