渲染放大的图片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 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

数字图像处理笔记二 - 图片缩放(最近邻插值(Nearest Neighbor interpolation))

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/haluoluo211/article/d...

2572
来自专栏数说工作室

【近期预告】核函数的忧伤

下周将更新SVM第五话——核函数,核函数是很多同学在机器学习道路上de一抹说不出的忧伤~~~ ? 感兴趣的同学可以先复习一下前面四话(在微信公众号中回复“SV...

3238
来自专栏CreateAMind

代码解读Top-down Neural Attention by Excitation Backprop及模型架构图

1193
来自专栏深度学习入门与实践

【深度学习系列】PaddlePaddle可视化之VisualDL

  上篇文章我们讲了如何对模型进行可视化,用的keras手动绘图输出CNN训练的中途结果,本篇文章将讲述如何用PaddlePaddle新开源的VisualDL来...

3739
来自专栏人工智能LeadAI

关于深度学习框架Hamaa与Python API文档生成工具Sophon

当时我学习Deep Learning已有两个月,看了很多论文、教程与博客,于是尝试着去阅读Keras的源代码来学习别人是怎么实现的,尤其是back propa...

943
来自专栏CreateAMind

Attribute2Image: 根据要求属性生成图片-视频及代码

Attribute2Image: Conditional Image Generation from Visual Attributes

932
来自专栏机器之心

资源 | Luminoth:基于TensorFlow的开源计算机视觉工具包

2867
来自专栏人工智能LeadAI

使用Python+Tensorflow的CNN技术快速识别验证码

近年来,机器学习变得愈加火热,中国选手柯洁与AlphaGo的人机大战更是引起热议。目前,在图像识别和视觉分析研究中,卷积神经网络(CNN)技术的使用越来越多。T...

5926
来自专栏新智元

【深度学习Github 10万+源代码分析】Python是第三受欢迎语言

【新智元导读】编程语言是软件开发的主要工具。自20世纪40年代以来,已经有数百种语言被发明出来,每天大量的各种语言编写的代码活跃着代码库。本文作者从 GitHu...

3478
来自专栏专知

【Keras作者Chollet最新力作】深度学习Python教程实战书籍

Keras作者、谷歌大脑François Chollet最新撰写的深度学习Python教程实战书籍(2017年12月出版)介绍深入学习使用Python语言和强大...

3736

扫码关注云+社区