CSS給圖片設置層疊(z-index)和模糊(filter:blur)
1. 效果圖
![在這裏插入圖片描述]()
2. html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片</title>
<style type="text/css">
img:nth-child(1){
position:absolute;
left:250px;
top:300px;
z-index:-1
}
img:nth-child(3){
position:absolute;
left:1090px;
z-index:-10
}
img:nth-child(4){
position:absolute;
left:100px;
top:800px;
z-index:-15
}
img:nth-child(5){
position:absolute;
left:660px;
top:870px;
z-index:-20
}
img:nth-child(6){
position:absolute;
left:1060px;
top:570px;
z-index:-30
}
</style>
</head>
<body>
<div>
<img src="../img/用戶.png" alt="圖片" style="width:700px;height:700px;" />
<img src="../img/用戶.png" alt="圖片" style="width:500px;height:500px;filter: blur(20px);" />
<img src="../img/用戶.png" alt="圖片" style="width:500px;height:500px;filter: blur(9px);"/>
<img src="../img/用戶.png" alt="圖片" style="width:500px;height:500px;filter: blur(13px);"/>
<img src="../img/用戶.png" alt="圖片" style="width:500px;height:500px;filter: blur(15px);"/>
<img src="../img/用戶.png" alt="圖片" style="width:500px;height:500px;filter: blur(18px);"/>
<img src="../img/用戶.png" alt="圖片" style="width:500px;height:500px;filter: blur(38px);"/>
</div>
</body>
</html>
3. 所用圖片
![在這裏插入圖片描述]()
