如何正确模糊所需的图像

Question

我正在尝试仅模糊背景图像，但似乎得到的结果模糊了整个div

我的代码如下：

.profile-div {
  background-image: url("http://2.bp.blogspot.com/_QtDFVR44S_Q/TTu95-aiCqI/AAAAAAAAA-k/jP65Ns2H-f0/s1600/camaleon2.jpg");
  width: 100%;
  height: 12em;
}

.img-profile {
  height: 8em;
  width: 8em;
  border: 3px solid black;
  margin-top: 2em;
  margin-bottom: 2em;
}

<div class="profile-div scale-image img-blur">
  <div class="form-group">
    <input style="display: none" type="file" accept=".png,.jpg" (change)="uploadProfilePicture($event)" #fileInput />
    <img *ngIf="imageURL" src="{{auxAuth.photoURL}}" class="pointer rounded-circle img-profile" (click)="fileInput.click()">
  </div>
</div>

我期望的是模糊div背景的img，但同时也模糊内部img。我该如何更改？

我显示了当前结果：

Answer 1

将背景图像移动到单独的div，然后将它们都用容器包装起来：

HTML：

<div class="container-div">
    <div class="profile-div scale-image img-blur"></div>
      <div class="form-group">
        <input style="display: none" type="file" accept=".png,.jpg" (change)="uploadProfilePicture($event)" #fileInput />
        <img *ngIf="imageURL" src="{{auxAuth.photoURL}}" class="pointer rounded-circle img-profile" (click)="fileInput.click()">
      </div>
</div>

CSS：

.profile-div, .container-div {
   width: 100%;
   height: 12em;
 }

.profile-div {
  //example blur
 filter: blur(8px);
 -webkit-filter: blur(8px);
}

.img-profile {
 position: absolute;
 top: 2em;
 bottom: 2em;
 height: 8em;
 width: 8em;
 border: 3px solid black;
}