深挖一下背景模糊效果的三种表现形式:
- 背景整体模糊
- 背景局部模糊
- 背景局部清晰
背景整体模糊:
最近频繁出现一个需求,实现类似于这种效果
,背景是商品图模糊后的样子,商品图出现在前面,我第一反应是通过定位position和滤镜filter实现,来看看吧
先定结构,有坑点:
<div class="bg">
<div class="content">我是内容</div>
</div>
分析:,如果我们把background和filter直接写在bg上,这样写会使整个div的后代模糊并且还会出现白边
,导致页面非常不美观,要想解决这个问题,我们可以使用伪元素
,因为伪元素的模糊度不会被父元素的子代继承。
白边:
完整实现:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
html,
body {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0