CSS матовое стекло расположено неправильно - PullRequest
Новая
       14

CSS матовое стекло расположено неправильно

0 голосов
/ 23 июня 2019

Я пытаюсь добиться эффекта матового стекла с помощью CSS, как здесь: https://codepen.io/GreggOD/full/xLbboZ

Но я думаю, что-то упускаю, потому что он показывает мне полное изображение, но меньшего размера

Я установил background-size: cover; background-attachment: fixed;, но это не решает проблему 

#second_wrapper {
  background-image: url("https://images.pexels.com/photos/2466644/pexels-photo-2466644.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  height: 250px;
  width: 500px;
}

#test_image {
  background: inherit;
  position: relative;
  left: 50%;
  top: 50%;
  overflow: hidden;
  height: 200px;
  width: 400px;
  transform: translate(-50%, -50%);
}

#blur {
  position: absolute;
  height: 100%;
  width: 100%;
  background: inherit;
  filter: blur(5px);
}
<div id='second_wrapper'>
  <div id='test_image'>
    <div id='blur'>
    </div>
  </div>
</div>

1 Ответ

1 голос
/ 23 июня 2019

Это то, что ты хотел?Я добавил новые правила CSS в #test_image:after

  background: inherit;
  position: relative;
  left: 10%;
  top: 10%;
  height: 200px;
  width: 400px;
  /*transform: translate(-50%, -50%);*/

Обратите внимание, что в этом случае нельзя использовать transform, поскольку при преобразовании унаследованное фоновое изображение также перемещается с помощью div.

Попробуйте раскомментировать transform и измените значения translate в devtools 

#second_wrapper {
  background-image: url("https://images.pexels.com/photos/2466644/pexels-photo-2466644.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  height: 250px;
  width: 500px;
}

#test_image {
  background: inherit;
  position: relative;
  left: 10%;
  top: 10%;
  height: 200px;
  width: 400px;
  /*transform: translate(-50%, -50%);*/
}

#test_image:after {
  content: "";
  background: inherit;
  filter: blur(10px);
  width: 400px;
  height: 200px;
  display: block;
}
<div id='second_wrapper'>
  <div id='test_image'>
    <div id=''>
      T
    </div>
  </div>
</div>
...