css3-图文模糊效果

css3-图文模糊效果

知识点分析：

设置内容水平居中

position: absolute;

left: 50%;

transform: translate(-50%,25%);

设置高斯模糊

filter: blur(50px);

html:

    <section class="container">
        <img src="./img/1.jpg" alt="">
    </section>

css:

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-color: #262626;
        }
        .container{
            width: 400px;
            position: absolute;
            left: 50%;
            transform: translate(-50%,25%);
            text-align: center;
            color: #fff;
            font-size: 2em;
            font-family: Arial, Helvetica, sans-serif;
        }
        .container img{
            width: 100%;
            box-shadow: 0 0 20px rgba(255,255,255,0.3);
            transition: 0.3s;
        }
        .container img:hover{
            filter: blur(50px);
        }
    </style>