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

相关文章

来自专栏SHERlocked93的前端小站

CSS 中重要的层叠概念

最近在项目的过程中遇到了一个问题,menu-bar希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因,因...

962
来自专栏偏前端工程师的驿站

CSS魔法堂:盒子模型简介

本文讨论的是块级盒子(Block-level box)的盒子模型(Box Model) ? 一、W3C标准的盒子模型                      ...

1866
来自专栏移动端周边技术扩展

Masonry横向纵向排列多个控件

1413
来自专栏前端小吉米

SVG 动画精髓

1775
来自专栏落影的专栏

iOS坐标系探究

APP 在渲染视图时,需要在坐标系中指定绘制区域。这个概念看似乎简单,事实并非如此。

4573
来自专栏图形学与OpenGL

4.4.2 OpenGL几何变换编程实例

/* 三维旋转变换,参数:旋转轴(由点p1和p2定义)和旋转角度(thetaDegrees)*/

1222
来自专栏cnblogs

Css3新特性应用之过渡与动画

一、缓动效果 学习和利用贝塞尔曲线,默认支持ease,ease-in,ease-out,ease-in-out和linear等 还提供一个cubic-beize...

2767
来自专栏calmound

CSS继承特殊

继承 CSS的某些样式具有继承性。 继承是一种规则,它允许样式不仅作用于某个特定html标签元素,而且应用于其后代    如:在p中的所有字体都为红色     ...

2615
来自专栏前端说吧

CSS3的transition动画功能

3056
来自专栏菩提树下的杨过

Flash/Flex学习笔记(25):摩擦力与屏幕环绕

摩擦力: 假如一个物体在某个方向上沿直线运行,摩擦力会使该方向上的速度越来越小,直到停止。 ? 上图示意了该过程,物体以moveAngle角度正向运动,最终的...

1906

扫码关注云+社区