针对易读性的背景滤镜兼容方案(CSS filter 兼容方案)

你知道现在有多火吗?用这种很大的,高质量的,支持 Retina 屏的模糊的 JPEG 图片作为 header 背景 :

See the Pen Web site header, circa 2016 by Taylor Hunt (@tigt) on CodePen.


潜在的问题是如果浏览器不支持滤镜 filter,文字将不可读 。这违背了可访问性的原则,再完美的视觉也无济于事。

附图1
支持和不支持 filter 的效果对比

因此呢,你需要提前准备好处理模糊的图片,可是设计师偏要你实现动态模糊呢,图片不固定,跟 Apple 的效果一样一样的,咋办?如果是用户上传的图片又咋办?嗯,你需要一台图片处理服务器,听起来成本很高。

我碰巧想到一个妙招,让不支持 filter 的浏览器用颜色图层代替,方案并不完美,但是具有高可读性:

附图2
不支持 filter 的效果

基本实现

我用伪元素作为背景,因为给元素加 filter单纯给背景加 filter 兼容性更好

加特效

此时,设计师发话了,让背景图模糊一下,再来个轻微变暗效果就更好了。

这么做还远远不够,不支持 filter 的浏览器将严重影响阅读。

上妙招

是否听过 filteropacity() 效果 ?对比广泛支持的 opacity 属性,它显得有点鸡肋,但是它的存在才使得兼容方案得以实现:

如果支持 filter 滤镜,带图片的伪元素是模糊的,微微变暗的,这一黑色的遮罩层是完全透明的。如果不支持滤镜呢,显示效果并不完美,但是不会阻碍任何人阅读上面的文字。

CodePen 的例子在此,希望你喜欢:

See the Pen Filtered background with fallback for legibility by Taylor Hunt (@tigt) on CodePen.

其它 filter 滤镜的使用或许也能受此启发,我把它放到了我的锦囊里。

何不用 @supports 代替?

浏览器对 CSS 特性检测(@supports)的支持程度跟 filter 保持一致 ,替换以后代码更加清晰明了:

你完全可以这么写,全看个人喜好。我查阅了 CanIUse 的使用数据,有一些环境仍不支持 @supports

  • Chrome 18–27
  • Safari 8.x
  • UC Browser 9.9(撰写本文时)

直到2016年5月,以上浏览器的联合使用份额是 ≈ 美国 3.6%、世界范围 10.5%(感谢大洋彼岸 UC 的盛行)。这些数字会随着时间流逝逐渐减少,到那时,如果想写更加清晰的 CSS 就推荐使用 @supports 了。

打赏支持我翻译更多好文章,谢谢!

打赏译者

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

1 3 收藏 评论

关于作者:涂鸦码龙

不高级前端攻城狮,原名金龙,不姓郭。【忙时码代码,无事乱涂鸦】http://jinlongz.lofter.com/,涂手:Alon 个人主页 · 我的文章 · 3 ·    

可能感兴趣的话题



直接登录
跳到底部
返回顶部