Почему не работает фон: Blur () правильно работает? ⇐ Html

[Anonymous]

Я пытаюсь реализовать это изображение:

, где дивизион с текстом "собака" частично покрывает и blurring изображение. Итак, я попробовал это: < /p>

Код: Выделить всё

   .profile {
background-image: url(https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg);
width: 250px;
height: 250px;
background-size: cover;
background-position: 0px;
}

.name {
position: absolute;
bottom: 0px;
left: 0px;
background-color: black;
color: white;
padding-top: 15px;
padding-bottom: 15px;
width: 100%;
opacity: 60%;
backdrop-filter: blur(10px); // should do the trick but not working??
}< /code>

Dog

, хотя дивизионная окраска/our orurs/outry nt is out orurring it airtor it autr Часть изображения, которое он покрывает. Я не понимаю, что я делаю не так. Если кто -то сможет указать мне в правильном направлении, я бы очень признателен. Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/739 ... g-properly