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. 所用图片
22
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
