你必须穷尽一生磨练技能,这就是成功的秘诀,也是让人家敬重的关键。

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

表现 练小习 1324浏览 2评论

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

转载请注明:练小习的前端技术笔记 » 渲染放大的图片image-rendering笔记

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (2)

  1. 移动端不行哦
    路过3年前 (2016-06-29)回复