html - 如何正确模糊所需的图像

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;
}