css属性image-redering详解

What?

image-rendering作为现阶段还处于实验性质中的css属性,他的作用是在浏览器对图片进行比例缩放时,设置其缩放使用的算法,从而来得到我们最终想要的图片结果。而且这个属性可以应用于imgcanvasbackground-image中。

Note

由于该属性未得到所有浏览器的支持,本文直接在文章里应用该属性,所以阅读此文时请使用最新版本的浏览器

Usage

image{
   image-rendering:auto;
}

其可选的值有:

  • auto
    使用默认算法,即将图片色彩进行平滑缩放,不同的浏览器采用的算法不一,如:firefox 3.0后的gecko使用双线性插值(bilinear interpolation)算法
  • crisp-edges
    使用算法达达到在绽放时保持对比度和边缘,在加工时不平滑色彩和使用模糊
  • pixelated
    当图片放大时,单纯地去放大像素点,缩小时与auto效果一样

Demo


pixelated

我们先来放主角一

看到了吗?这就是主角,一个大小为2*2像素的图片……

(图片君:你个鬼把我设计这么小,赶快把爷整大,不然削你!)

既然大哥发话了,小弟不能不听命,分分钟给大哥加了个width:400px

可是放大后……

(我:大哥,这还是你吗?你怎么变得这么色彩绚烂了)

(图片君:真是B了狗了!你对我做了什么)

(我:大哥,这不是我的错,是浏览器对你放大时使用了默认的算法把你的色彩平滑处理了……其实,现在还是挺好看的嘛!)

(图片君:别跟我扯犊子,给我整回来!!!!!)

大哥一怒,我连忙加点去给大家做整容手术,在它的属性里加了image-redering: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.

posted @ 2015-08-23 23:04 纸异兽 阅读(...) 评论(...) 编辑 收藏