Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

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

Дмитрий Соколинский Ученик (103), на голосовании 2 недели назад
Я ставлю 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;
}
Голосование за лучший ответ
робот д24 Мудрец (19531) 1 месяц назад
Надо сделать элемент, который будет его перекрывать снаружи, а не внутри него и туда положить внутренние элементы
Дмитрий СоколинскийУченик (103) 1 месяц назад
Это типо как?
робот д24 Мудрец (19531) Дмитрий Соколинский, через position: absolute
робот д24Мудрец (19531) 1 месяц назад
Я не это имел ввиду. Нужен ещё один элемент за ним. И он должен перекрыть этот
Дмитрий Соколинский Ученик (103) робот д24, типо?
Татьяна Просветленный (36344) 1 месяц назад
Привет! Судя по описанию проблемы, основной вопрос в том, что фильтр размытия (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 для размытого фона, чтобы он растянулся на весь блок, и при этом остальной контент остался видимым и неразмытым.
Оракул (50000) 1 месяц назад
 твой
код
css
Оракул (50000) 1 месяц назад
 может автору
нужно
чтобы
сама картинка
что
слева
была
чёткой

а вот
всё остальное мутным
Оракул (50000) 1 месяц назад
 в твоём коде
картинка
чёткая

но вот
тёмно-красный прямоугольник
он тоже чёткий

а нужен мутный
Оракул (50000) 1 месяц назад
 я проблему
для автора вопроса
решил

теперь всё мутное
кроме картинки

код автору написал
Дмитрий Соколинский Ученик (103) ⚠, а как сделать такой бекграунд?
Дмитрий СоколинскийУченик (103) 1 месяц назад
Именно сам бекграунд, его размытость
Оракул (50000)
 я не
создаю
наугад

я только
могу
из
рабочего
кода
добавить
отредактировать
изменить

а так
что-то
выдумывать
и придумывать
это
не моё
увлечение 
Похожие вопросы