您的位置:主页 > HTML/JS > 差异化兼容FF的网页变灰

差异化兼容FF的网页变灰

==================================================================
此段 :更新 2012 -08-14
W3C filter 规范的推出,想要更加便捷无脑完美的使网页变灰变成了可能。
目前webkit率先支持了此规范,chrome18,以及safari 6.0之后可以运行。
对于firefox我们可以用svg来做

  1.  
  2. -webkit-filter: grayscale(100%);
  3. filter: grayscale(100%);
  4. filter: url(desaturate.svg#grayscale);
  5. filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  6.  
  1.  
  2. <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  3. <filter id="grayscale">
  4. <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
  5. 0.3333 0.3333 0.3333 0 0
  6. 0.3333 0.3333 0.3333 0 0
  7. 0 0 0 1 0"></feColorMatrix>
  8. </filter>
  9. </svg>
  10.  

目前情况window平台下的safari 只到5.2的版本还不能支持到css3 filter,同opera还不支持,相信来未来不久能够真正完美的兼容网页变灰
==================================================================

网上所有的变灰代码无疑都是用IE的滤镜,只是IE的独有属性,如何在ff下面变灰呢?

第一种用canvas对图像进行处理,效率就不说了,因为canvas像素操作的安全限制,要求图片必须和页面在同域之下,并且对flash是没法处理的。

第二种方法对于专业网站,他们手动或者自动处理所用的图片,但是太麻烦了,虽然我的网站图片很少,批处理一下就搞定了,但是我很懒,有没有一步式的处理方法呢。

于是想到山寨的遮罩层,但是出现了一个问题,下面的元素却不能点击了,没关系““pointer-events”帮你忙,我们先看看关于他的介绍,

CSS pointer-events
原本来源于SVG,目前在很多浏览器中已经得到体现,默认它设置为auto,这是正常的行为,如果你已经设置属性值为none。它将不会捕获任何click事件,而是让事件穿过该元素到达下面的元素。

目前位置标准浏览器中除了Opera没有支持其他都支持了,所以我们对IE使用滤镜,标准浏览器使用遮罩,来达到差异化兼容FF,chrome,为了方便各位朋友做成了js,在IE下面用滤镜,标准浏览器下面用遮罩,虽然遮罩的效果差了一点,但是至少也算哪个样子。
在</body>之前引用

作者:ariesjia

前端少先队员,光荣的红领巾在胸前飘扬

继续八卦

已经7条留言

  1. 海梦缘 On 2010年04月22日11:22 下午

    年轻人,不错啊 呵呵

  2. iamlukas On 2010年04月23日11:06 上午

    主題很漂亮。

  3. Ray On 2010年04月23日3:29 下午

    css应该也能实现这个功能
    :)

    • Ariesjia On 2010年04月24日1:27 下午

      呵呵,对啊,都是CSS的,我只是为方便使用做成用JS的

  4. jin On 2010年07月20日5:08 下午

    ff,Opera 测了不可兼容

  5. Ariesjia On 2010年08月14日11:22 上午

    回复 jin On :

    ff,Opera 测了不可兼容

    这是一种差异化的实现,不清楚你怎么测的,确实可以兼容,用canvas可以做到很好,但是对于图片而言就有要求,必须是当前域之下的

  6. skin2skin On 2010年12月21日5:15 下午

    回复 Ariesjia On :

    回复 jin On :
    ff,Opera 测了不可兼容

    这是一种差异化的实现,不清楚你怎么测的,确实可以兼容,用canvas可以做到很好,但是对于图片而言就有要求,必须是当前域之下的

    FF真的不可兼容

留言万岁!吹水有益健康!