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