css 背景图片模糊 上面内容不模糊

html:

<div class="shadow">
<div class="bg bg-blur"></div>
     <img src="./img/1.jpg" class="yuan"/>
</div>

css:

.shadow{position: relative;}
 .bg {
            background: url('../../img/1.jpg');
            height:9rem;
            width: 16rem;
            background-repeat: no-repeat;
            /*background-position: top;*/
            background-size: 100% 100%;
            -webkit-filter: blur(0.4rem);
            -moz-filter: blur(0.4rem);
            -o-filter: blur(0.4rem);
            -ms-filter: blur(0.4rem);
            filter: blur(0.4rem);
            /*text-align: center;*/
            /*line-height: 9rem;*/
           /*float: left;*/
            /*width: 100%;*/
           /*text-align: center;*/
        }
       
        .yuan {
          position: absolute;
          left: 6rem;
          top: 1.5rem;
          height:4rem;
          width: 4rem;
          border-radius: 50%;
          
        }