css属性image-redering详解
What?
image-rendering作为现阶段还处于实验性质中的css属性,他的作用是在浏览器对图片进行比例缩放时,设置其缩放使用的算法,从而来得到我们最终想要的图片结果。而且这个属性可以应用于img
,canvas
和background-image
中。
Note
由于该属性未得到所有浏览器的支持,本文直接在文章里应用该属性,所以阅读此文时请使用最新版本的浏览器
Usage
image{
image-rendering:auto;
}
其可选的值有:
- auto
使用默认算法,即将图片色彩进行平滑缩放,不同的浏览器采用的算法不一,如:firefox 3.0后的gecko使用双线性插值(bilinear interpolation)算法 - crisp-edges
使用算法达达到在绽放时保持对比度和边缘,在加工时不平滑色彩和使用模糊 - pixelated
当图片放大时,单纯地去放大像素点,缩小时与auto
效果一样
Demo
pixelated
我们先来放主角一
!
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABlJREFUeNpiPhxqc9E2leHdK4usHToAAQYALAYGKZxwHcgAAAAASUVORK5CYII=">
看到了吗?这就是主角,一个大小为2*2像素的图片……
(图片君:你个鬼把我设计这么小,赶快把爷整大,不然削你!)
既然大哥发话了,小弟不能不听命,分分钟给大哥加了个width:400px
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABlJREFUeNpiPhxqc9E2leHdK4usHToAAQYALAYGKZxwHcgAAAAASUVORK5CYII=" style="width:400px;">
可是放大后……
(我:大哥,这还是你吗?你怎么变得这么色彩绚烂了)
(图片君:真是B了狗了!你对我做了什么)
(我:大哥,这不是我的错,是浏览器对你放大时使用了默认的算法把你的色彩平滑处理了……其实,现在还是挺好看的嘛!)
(图片君:别跟我扯犊子,给我整回来!!!!!)
大哥一怒,我连忙加点去给大家做整容手术,在它的属性里加了image-redering:pixelated
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABlJREFUeNpiPhxqc9E2leHdK4usHToAAQYALAYGKZxwHcgAAAAASUVORK5CYII=" style="width:400px;image-rendering:pixelated">
(我:这才是你嘛,大哥)
(图片君:这次不错,我还是我,是颜色不一样的烟火)
从大哥那里学到了pixelated的作用,而它在实际中的作用是怎么样的呢?
比如我有一个内容为zhiyishou.com的二维码君
,它的大小为50px*50px
二维码君虽说不小,但是比变壮后的大哥小多了,二维码君也来找我想说整整容,变成大哥那样
于是,我直接把它变大,成了这样:
这……你英姿飒爽的轮廓呢?看来还是不对,思索了一下是和大哥的病一样
我二话没说,直接把刚学会的pixelated加在了二维码君的身上
这才是俊朗的二维码君嘛!!
crisp-edges
从w3c官网上请来了一位嘉宾,它来和我们演示crisp-edges的用法:
我们把嘉宾君
进行放大:
这是嘉宾君在普通放大后的结果,即使用auto来做色彩平滑,我们试试在嘉宾君身上使用pixelated
,看看会怎么样
嘉宾君有点不耐烦了,有事要走,赶快给它加上crisp-edges
看看效果(由于各个浏览器对该属性的支持还不太统一,所以得做单独配置)
img{
width: 400px;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
可以看出来嘉宾君的边缘没有像第一次那样被平滑掉,尽可能保持自己的边缘,但是整个图片做了模糊处理,所以不像上面的pixelated一样棱角分明。
这个效果可以对图片缩放时进行效果的优化,但和pixelated的应用场景不一样。
Finally
我感觉这个属性最实用的还是pixelated,对于这个属性的使用,我们不能去绝对地依赖它来实现某种效果,只能说是用它去做优化,要做到有它的参与更好,没有也不差什么,因为这个属性太新了,在chrome中出现也是chrome41,而且chrome目前还不支持crisp-edges值
Chrome | ‡ 41+
Safari | * 7.1+
Firefox | * 35+
Opera | 28+
IE | Nope
Android | Nope
iOS | * 7.1+
‡ Supports pixelated but not crisp-edges
* Supports crisp-edges but not pixelated
参考
image-rendering on MDN
image-rendering on W3C
image-rendering article
Finish.
最新文章
- I18n问题 国际化
- 原来scanf读入字符串还能这样..
- 尽快写完Math!
- Effective Java 读书笔记之五 枚举和注解
- scala言语基础学习六
- ifdebug
- mysql 表操作
- C#视频总结
- Android应用程序窗口(Activity)的窗口对象(Window) 的创建过程分析
- 对java面向对象的初识
- python 中文编码
- RequireJS入门级_RequireJS能给我们带来什么帮助?
- F#周报2019年第13期
- A - Packets 贪心
- 《Apache Kafka 实战》读书笔记-认识Apache Kafka
- Maven学习 三 Maven与Eclipse结合使用
- iOS 7 UI 过渡指南 - 開始之前(iOS 7 UI Transition Guide - Before You Start)
- .Net中的内存分配问题
- selenium&;PhantomJS笔记
- Redis 为什么使用单进程单线程方式也这么快
热门文章
- ubuntu16.4安装后做的事情
- 推荐算法——非负矩阵分解(NMF)
- mysql允许远程连接
- 利用国内的源安装 Python第三方库
- RPC服务框架dubbo(二):dubbo支持的注册中心
- mysql启动错误之mysql启动报1067错误如何解决
- [sh]shell脚本栗子
- iOS第三方开源库的吐槽和备忘
- PHP中把stdClass Object转array的几个方法
- linux 编译kernel与svn版本冲突解决方法 [drivers/gpu/mali/mali/common/mali_kernel_core.o] 错误 1