方案一、<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 机型中，会出现毛玻璃效果导致背景图无法显示的现象，故做出这第三种方案。顺利搞定。
