Я пытаюсь размыть фоновое изображение в контексте столбца. Для этого я использую parent
со свойством background-attachment
, хорошо работаю для полноэкранного контекста.
Но для столбца это не работает, потому что фон использует ширину экрана, а не родительскую ширину (это свойство background-attachment).
Итак, кто-нибудь уже, как я могу исправить этот контекст? Я ищу динамическое решение, я не могу установить положение фона вручную.
Проблема контекста: каждый столбец использует ширину экрана, а не родительский с:
Вы можете увидеть мой CSS:
.parent {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.item {
overflow: hidden;
top: 0;
left: 0;
&,
&::before {
position: absolute;
background: inherit;
}
> span {
position: relative;
}
&::before {
content: '';
top: rem-calc(-25);
left: rem-calc(-25);
bottom: 0;
right: 0;
width: rem-calc(500);
height: rem-calc(200);
box-shadow: inset 0 0 0 rem-calc(200) rgba(255, 255, 255, 0.2);
filter: blur(5px);
}
}
Может быть, для этого существует JS модуль?
Спасибо, сообщество!
Новые вопросы
css
CSS (каскадные таблицы стилей) - это язык таблиц стилей представления, используемый для описания внешнего вида и форматирования документов HTML (язык разметки гипертекста), XML (расширяемый язык разметки) и элементов SVG, включая (но не ограничиваясь) цвета, макет, шрифты, и анимации. Также описывается, как элементы должны отображаться на экране, на бумаге, в речи или на других носителях.