针对易读性的背景滤镜兼容方案(CSS filter 兼容方案)_html/css_WEB-ITnose
潜在的问题是如果浏览器不支持滤镜 filter, 文字将不可读 。这违背了可访问性的原则,再完美的视觉也无济于事。
支持和不支持 filter 的效果对比
因此呢,你需要提前准备好处理模糊的图片,可是设计师偏要你实现动态模糊呢,图片不固定,跟 Apple 的效果一样一样的,咋办?如果是用户上传的图片又咋办?嗯,你需要一台图片处理服务器,听起来成本很高。
我碰巧想到一个妙招,让不支持 filter 的浏览器用颜色图层代替,方案并不完美,但是具有高可读性:
不支持 filter 的效果
基本实现
我用伪元素作为背景,因为给元素加 filter 比 单纯给背景加 filter 兼容性更好 。
.backdrop { position: relative }.backdrop::after { content: ""; /* 铺满整个父元素 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* 放到父元素内容的下层 */ z-index: -2; /* 像父元素一样展示背景 */ background: #222 url("inspirational-landscape-and/or-laughing-with-salad.jpg");}
加特效
此时,设计师发话了,让背景图模糊一下,再来个轻微变暗效果就更好了。
/* 不要忘记前缀,Safari >9.1 和所有 Chrome 仍然需要 -webkit- */filter: blur(4px) brightness(75%);
这么做还远远不够,不支持 filter 的浏览器将严重影响阅读。
上妙招
是否听过 filter 有 opacity() 效果 ?对比广泛支持的 opacity 属性,它显得有点鸡肋,但是它的存在才使得兼容方案得以实现:
.backdrop::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* 把它放到其它伪元素的上面,但是仍在父元素内容的下面 */ z-index: -1; /* 让遮罩层足够的暗,无论什么背景都可以看清楚上面的文字 */ background: rbgba(0,0,0, 0.5); /* 使用滤镜完全隐藏它?? */ filter: opacity(0%);}
如果支持 filter 滤镜,带图片的伪元素是模糊的,微微变暗的,这一黑色的遮罩层是完全透明的。如果不支持滤镜呢,显示效果并不完美,但是不会阻碍任何人阅读上面的文字。
CodePen 的例子在此,希望你喜欢:
See the Pen Filtered background with fallback for legibility by Taylor Hunt ( @tigt ) on CodePen .
其它 filter 滤镜的使用或许也能受此启发,我把它放到了我的锦囊里。
何不用 @supports 代替?
浏览器对 CSS 特性检测( @supports )的 支持程度跟 filter 保持一致 ,替换以后代码更加清晰明了:
@supports (filter: blur(4px) brightness(75%)) or (-webkit-filter: blur(4px) brightness(75%)) { /* 浏览器支持 filter 的话... */}
你完全可以这么写,全看个人喜好。我查阅了 CanIUse 的使用数据,有一些环境仍不支持 @supports :
- Chrome 18–27
- Safari 8.x
- UC Browser 9.9(撰写本文时)
直到 2016年5月 ,以上浏览器的联合使用份额是 ≈ 美国 3.6%、世界范围 10.5%(感谢大洋彼岸 UC 的盛行)。这些数字会随着时间流逝逐渐减少,到那时,如果想写更加清晰的 CSS 就推荐使用 @supports 了。

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

本文讨论了html< datalist>元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

本文讨论了HTML< Progress>元素,其目的,样式和与< meter>元素。主要重点是使用< progress>为了完成任务和LT;仪表>对于stati

本文讨论了HTML< meter>元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了< meter>从< progress>和前

本文解释了HTML5< time>语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit
