Как правильно размыть нужные изображения - PullRequest
Новая
       13

Как правильно размыть нужные изображения

0 голосов
/ 06 ноября 2018

Я пытаюсь размыть только изображение фона, но кажется, что результат, который я получаю, это размытие всего 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 фона div, но это также размывает внутреннюю часть img. Как я мог это изменить?

Я показываю свой текущий результат:

enter image description here

1 Ответ

0 голосов
/ 06 ноября 2018

Переместите фоновое изображение в отдельный 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;
}
...