H5+CSS3 背景图毛玻璃效果实现方案

方案一、 + filter: blur()

优势：

• 通过 的方式引入背景图片或者图标，可以被搜索引擎抓取，可用于网站页面中较为重要的图片资源的引入。
• 通过 引入图片时，可以通过单独设置 width 或 height 的其中一个，并将另外外一个设置为 auto ，以实现图片在一个方向轴上的等比拉伸，可以避免图片的拉伸变形。

劣势：

• 通过 引入图片，是引用外部资源，会占用一个 http 会话。
• html 中，通过 引入图片时，若图片过大，则可能造成页面结构加载、渲染阻塞，页面内容需等待图片加载完成之后，才能完整显示出图片并继续页面结构的加载和渲染。

 

方案二、background-image + filter: blur()

优势：

• 相较于 的引入方式，通过 background-image 的引入方式，不会造成页面结构加载、渲染的阻塞。
• css 中，为 background 提供了多种属性，可以分别对应的对引入的图片进行设置，比 的引入方式更加灵活。
• background-image 引入图片时，默认情况下会将图片重复平铺（repeat）满整个元素的背景可以用于将小图片平铺作为背景，从而在一定程度上节省网络加载资源。

劣势：

• background-image 的引入方式，因为默认会平铺，会导致本不需要平铺的图片也会平铺满整个元素，需要将 background-repeat 设置为 'no-repeat' 以关闭平铺行为。
• 当仅将元素作为图片展示时，需要明确设置元素的宽高，否则作为空元素，没有宽高，无法正常展示图片。

 

方案三、backdorp-filter: blur()

这种方案跟第二种方案类似。

前两种方案，在部分 iphone 机型中，会出现毛玻璃效果导致背景图无法显示的现象，故做出这第三种方案。顺利搞定。