渲染放大的图片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%

100%

138%

image-rendering: pixelated;

78%

100%

138%

image-rendering: crisp-edges;

78%

100%

138%

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

复合饼图

今天要给大家分享的复合饼图的制作技巧! ▽ 其实这种复合饼图在数据表达与展示上与传统饼图相差无几,只是形式比较新颖,能够对局部数据突出展示,所以视觉传达效率比较...

2927
来自专栏州的先生

Scikit-Learn机器学习实践:垃圾短信识别

1292
来自专栏null的专栏

社团划分——有向图的Label Propagation算法

在博文社区划分——Label Propagation中,介绍了Label Propagation社区划分算法的基本原理,基本的Label Propagation...

2973
来自专栏Hongten

python开发_tkinter_小球完全弹性碰撞游戏_源码下载

===================================================

492
来自专栏数据小魔方

think-cell chart系列11——散点图

今天跟大家分享think-cell chart系列第11篇——散点图。 散点图也属于日常应用的高频图表,那么在think-cell chart中该如何制作呢……...

3905
来自专栏jiajia_deng

Qt 用画笔对图片实现马赛克效果

最近接了一个用 Qt 做跨平台截图工具的任务,主要功能有截图、绘制图案、马赛克、毛玻璃、文字能效果,其中马赛克功能时参考网上的文献并自己研究制作出来的,这里特意...

591
来自专栏李蔚蓬的专栏

第14周Python机器学习周记

(2)新增一个键值(maybe),计算香农熵,观察其变化(熵越高,则混合的数据也越多);

623
来自专栏自动化测试实战

HTML第三课——css盒子

2117
来自专栏進无尽的文章

实践-跑马灯效果及实现过程解析

621
来自专栏CDA数据分析师

50个逆天功能,看完变Excel绝顶高手(全都是动图!)

Excel的50个逆天功能,动画教程珍藏版。 1、自动筛选 ? 2、在Excel中字符替换 ? 3、在Excel中冻结行列标题 ? 4、在Excel中为导入外部...

2026

扫码关注云+社区