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

方案一、<img> + filter: blur()

<div class="container">
    <img class="background" src="./image/background.png">
</div>
<style>
    .background {
        width: 100px;
        height: auto;
        filter: blur(20px);
    }
</style>

优势：

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

劣势：

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

 

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

<div class="container">
    <div class="background"></div>
</div>

<style> 
    .background {
        width: 200px;
        height: 200px;
        background-image: url('./image/background');
        background-repeat: no-repeat;
    }
</style>

优势：

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

劣势：

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

 

方案三、backdorp-filter: blur()

<div class="container">
    <div class="background"></div>
    <div class="content"></div>
</div>

<style> 
    .container {
        position: relative;
    }
    .background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('./image/background');
        background-repeat: no-repeat;
    }
</style>

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

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