代码之家 › 专栏 › 技术社区 › bellotas

如何正确地模糊所需的图像

blur css html

bellotas · 技术社区 · 6 年前

我试图模糊只是背景的图像,但似乎我得到的结果是模糊的整体 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>

我所期望的是模糊 img 但它也模糊了内部 img公司 . 我怎样才能改变这一点?

我显示当前结果:

1 回复 | 直到 6 年前

Chochkov 6 年前

将背景图像移动到一个单独的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;
}