Привет! Судя по описанию проблемы, основной вопрос в том, что фильтр размытия (filter: blur) применяется на всем контейнере, а не только на отдельные его части. При этом даже использование z-index не помогает решить проблему, так как фильтр размытия влияет на все элементы внутри этого контейнера.
Вот несколько вариантов, как можно решить эту проблему:
1. Применение фильтра только к фону:
Один из возможных способов — отделить фон от содержимого и применить размытие только к фону. Это можно сделать, если добавить отдельный элемент для фона и применить к нему размытие, а контент сверху будет неразмыт. Например, можно добавить псевдоэлемент ::before к .profile_card для создания размытого фона.
.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, который будет находиться под основным контентом.
И CSS для этого:
.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 для размытого фона, чтобы он растянулся на весь блок, и при этом остальной контент остался видимым и неразмытым.
Сам код:
.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;
}