Я использую бутстрап. Мне нужно применить фильтр фона к этому полю ввода, чтобы изображение bg выглядело размытым.  .input-group {background-image: url ("https: //images.unsplash.com/photo-1579492450119 -...

3
Aaryaman Maheshwari 22 Мар 2021 в 06:12

1 ответ

Лучший ответ

Фильтр работает путем смешивания фона, который установлен на .input-group. Это означает, что вам нужно применить фильтр фона к входу (.form-control) вместо родительского узла (.input-group).

.input-group {
    background-image: url("https://images.unsplash.com/photo-1579492450119-80542d516179?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8OHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=400&q=60");
    color: black;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 50px;
}
    
.form-control {
  background-color: transparent;
  border-radius: 7px;
  padding-top: 25px;
  padding-bottom: 25px;
  backdrop-filter: blur(10px); /* <-------- Apply filter here */
}

Я добавил отступы к .input-group, чтобы подчеркнуть эффект.

0
pwkc 22 Мар 2021 в 09:21