Помогите мне пожалуйста. Проблема с CSS

Я ставлю filter:blur на основной див элемент, но проблема в том, что он ставится на других и я не могу никак убрать , даже через z-index. Что делать, помогите!

Сам код:
.profile_card
{
background: rgb(231,148,172);
background: radial-gradient(circle, rgba(231,148,172,1) 0%, rgba(193,0,0,1) 100%);
filter: blur(2px);
opacity: 0.7;
float: center;
margin: auto;
padding: 2px;
margin-top: 1.4%;
width: 900px;
height: 690px;
z-index: -1;
}

.profile_header
{
background: rgb(74,0,21);
background: radial-gradient(circle, rgba(74,0,21,1) 0%, rgba(92,0,0,1) 100%);
opacity: 1;
filter: none;
float: top;
margin: auto;
margin-top: 0.5%;
padding: 1px;
width: 880px;
height: 250px;
z-index: 1;
}

.profile_photo
{
opacity: 1;
float: top;
margin: auto;
}

По дате

По рейтингу

tatiana_41026

Просветленный

10мес

Привет! Судя по описанию проблемы, основной вопрос в том, что фильтр размытия (filter: blur) применяется на всем контейнере, а не только на отдельные его части. При этом даже использование z-index не помогает решить проблему, так как фильтр размытия влияет на все элементы внутри этого контейнера.

Вот несколько вариантов, как можно решить эту проблему:

1. Применение фильтра только к фону:
Один из возможных способов — отделить фон от содержимого и применить размытие только к фону. Это можно сделать, если добавить отдельный элемент для фона и применить к нему размытие, а контент сверху будет неразмыт. Например, можно добавить псевдоэлемент ::before к .profile_card для создания размытого фона.

12345678910111213141516171819202122232425262728293031323334353637383940414243

 .profile_card { 
  position: relative; 
  margin: auto; 
  padding: 2px; 
  margin-top: 1.4%; 
  width: 900px; 
  height: 690px; 
  z-index: 0; 
} 
 
.profile_card::before { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: radial-gradient(circle, rgba(231,148,172,1) 0%, rgba(193,0,0,1) 100%); 
  filter: blur(2px); 
  opacity: 0.7; 
  z-index: -1; 
} 
 
.profile_header { 
  background: radial-gradient(circle, rgba(74,0,21,1) 0%, rgba(92,0,0,1) 100%); 
  opacity: 1; 
  margin: auto; 
  margin-top: 0.5%; 
  padding: 1px; 
  width: 880px; 
  height: 250px; 
  z-index: 1; 
  position: relative; 
} 
 
.profile_photo { 
  opacity: 1; 
  float: top; 
  margin: auto; 
  position: relative; 
  z-index: 1; 
}

2. Использование отдельного блока для фона:
Если хочется полнее контролировать элементы, то можно просто вынести фон в отдельный div, который будет находиться под основным контентом.

12345678

 <div class="profile_card"> 
  <div class="profile_background"></div> 
  <div class="profile_content"> 
    <div class="profile_header"></div> 
    <div class="profile_photo"></div> 
  </div> 
</div>

И CSS для этого:

123456789101112131415161718192021222324252627282930313233343536373839

 .profile_card { 
  position: relative; 
  width: 900px; 
  height: 690px; 
  margin: auto; 
} 
 
.profile_background { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: radial-gradient(circle, rgba(231,148,172,1) 0%, rgba(193,0,0,1) 100%); 
  filter: blur(2px); 
  opacity: 0.7; 
  z-index: -1; 
} 
 
.profile_content { 
  position: relative; 
  z-index: 1; 
} 
 
.profile_header { 
  background: radial-gradient(circle, rgba(74,0,21,1) 0%, rgba(92,0,0,1) 100%); 
  opacity: 1; 
  margin: auto; 
  margin-top: 0.5%; 
  padding: 1px; 
  width: 880px; 
  height: 250px; 
} 
 
.profile_photo { 
  opacity: 1; 
  margin: auto; 
}

Объяснение:
Использование псевдоэлемента ::before или отдельного элемента для фона позволит размывать только фон, не затрагивая остальные элементы на странице.
z-index здесь помогает управлять слоями, где фон находится под контентом.
Мы используем position: absolute для размытого фона, чтобы он растянулся на весь блок, и при этом остальной контент остался видимым и неразмытым.