• 方法一.定义为background,并设置filter样式
• 方法二：使用节点定义图片，使用定位将其设置为背景（推荐）

方法一.定义为background,并设置filter样式

（此方法弊端是：当你在上面写文字时，文字也被模糊掉）
##效果图：

##部分代码：

<div class="header-content">我是一只猫（使用背景图片做出的效果）</div>

.header-content{
        height: 200px;
        width: 200px;
        margin:20px 20px;
        background: url('~@/assets/images@2x/renjialun.jpg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        filter: blur(1px);
    }

方法二：使用节点定义图片，使用定位将其设置为背景（推荐）

##效果图：

##部分代码

<div class="header-second">
            <span>我是一只猫（使用样式达到的效果）</span>
            <div @click="showDetail">
                点我出现浮框
            </div>
            <div class="img-content">
                <img :src="require('@/assets/images@2x/renjialun.jpg')" width="100%" height="100%">
            </div>
</div>

.header-second{
        height: 200px;
        width: 200px;
        margin:20px 20px;
        position: relative;
        .img-content{
            width: 100%;
            height: 100%;
            position: absolute;
            top:0;
            left: 0;
            z-index: -1;
            filter: blur(1px);
            // .img{此处设置宽高对图片无效，需在相应节点上设置
            //     width: 100%;
            //     height: 100%;

            // }
        }
    }