css3模糊背景的实现

顺晟科技

2022-09-13 13:42:30

219

实现全背景模糊，头像或者文字正常显示，实现的效果如下：

用到的主要属性: z-index叠加 , position ,

实现思路:外层用一个盒子里面放两个div,第一个div平铺父级,第二个div用z-index叠在第一个div上.另外需要注意的是z-index属性需要在position属性下才能体现出来.

用的时候需要改成自己的图片链接！文字需要在container中填写;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width , initial-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>demo</title>
    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        .wrap{
            position: relative; 
            height:100%;
            width: 100%;
            border: 1px solid #ebebeb;

        }
        .box{
            position: absolute;
            z-index: -1;
            top:0;
            right: 0;
            bottom: 0;
            left: 0;
            background: url(zhuomian.jpg) no-repeat center;
            background-size: cover;
            -webkit-filter: blur(10px);
            -moz-filter: blur(10px);
            -ms-filter: blur(10px);
            filter: blur(10px);
            border: 1px solid #000;
        }
        .container{
            position: relative;
            z-index: 999;
            background: url(zhuomian.jpg) no-repeat center;
            background-size: cover;
            width: 200px;
            height: 200px;
            margin: 200px auto;
            border-radius: 50%;
            border: 1px solid #fff;
        }
        .container img{
            height: 100%;
            width: 100%;
        }

    </style>
</head>
<body>
    <div class="wrap">
        <div class="box">

        </div>
        <div class="container">

        </div>
    </div>
</body>
</html></td>
</tr>
</table>

上一篇：10种独特的CSS背景视觉效果下一篇：CSS实践过滤器效果(背景图片模糊)

网站建设

Css

css3模糊背景的实现