将网页变灰的CSS代码片段 进入全屏
line

IE中可以直接使用CSS Filter实现,但非IE浏览器,却没有直接的提供类似方法。

好在CSS3出现了,可以通过filter:graysacle实现,但是目前仅支持chrome(18 dev+),

其他浏览器好像暂时没有支持的打算!

不过没关系,在中国,目前IE(6/7/8/9)+ Chrome(18 dev+)基本能覆盖了绝大部分浏览器(包括360、Maxthon、Sougou等)。

其余浏览器就算可以不用考虑支持,代码:

html { 
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
    -webkit-filter:grayscale(1.0);
}

写到这里,再顺便延伸一下-webkit-filter,严格意义上将,这个都不是CSS3的一部分,充其量算得上chrome浏览器的私有css,

其语法为:

-webkit-filter:effect(value);

effect可取下列值:

   grayscale           灰度,值为数值,x∈[0,1]

   sepia                  褐色,值为数值,x∈[0,1]

   saturate             饱和度,值为数值,默认是1,可以是小于1的小数,也可以大于1,x∈[0,+∞)

   hue-rotate         色相旋转,值为角度,x∈[0,360],单位deg

   invert                  反色,值为数值,x∈[0,1]

   opacity               透明度,值为数值,x∈[0,1]

   brightness          亮度,值为数值,默认是1,可以小于1(变暗),可以大于1(变亮);

   contrast              对比度,值为数字,默认是1,可以大于1,也可以小于1;

   blur                     模糊,值为length,表示模糊半径,比如filter:blur(2px)

   drop-shadow     阴影,值为shadow(),写法类似css3 box-shadow,比如filter:drop-shadow(0,0,10px,black)

阿里巴巴-钉钉-开放平台,能力开放&开发者运营岗位招聘中, 期待你的加入!
钉钉开放,让应用开发更简单
充分开放,是钉钉的重要方向!除致力于为开发者打造丰富的开放API, 更易接入的场景化能力包, 完备的应用开发工具之外, 还需要持续构建开放能力的布道、开发者生态运营体系,包括培训、沙龙、大会、社区合作等等。业务在快速发展,我们也还需要更多优秀的小伙伴加入!

评论区域

line