Можно ли впрыскивать или сочетать фоновый элемент родителя между фоновым элементом ребенка и передним планом?

Содержание

Вопрос или проблема
Ответ или решение
Вопрос о наложении фона родителя на детей в CSS
Введение
Возможности решения
Заключение

Вопрос или проблема

Я хотел бы изменить родительский элемент (только родитель) таким образом, чтобы это повлияло на фон его детей. Однако я не могу изменить код для детей.

Визуально фон родителя должен находиться либо между фоном и передним планом детей, либо фон родителя должен смешиваться с фоном детей.

Рассмотрите следующий код — вы заметите, что красный цвет (фон родителя) покрыт желтым (детьми). Я могу легко смешать фоны, изменяя режим смешивания на детях, но, как я уже писал, я не могу этого сделать — это должно быть ответственностью родителя.

И ещё одно препятствие — это должно работать для родителя с display block и grid как минимум.

Возможно ли это вообще? Если да, то как?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Заголовок</title>
<style>

    h1
    {
        z-index: 0;
        border: 1px green solid;
    }

    h1:nth-child(odd)
    {
        background-color: yellow;
    }

    .pane-bg
    {
        height: 8rem;
    }

    .indicator-bg
    {
        position: relative;
        overflow-y: scroll;
        height: 100%;

        background: radial-gradient(at top, rgba(255, 0, 0, 1), transparent 70%) 50% 0 / 50% 55px;
        background-repeat: no-repeat;
        background-attachment: scroll;
        isolation: isolate;
        mix-blend-mode: multiply;
        background-blend-mode: screen;
        z-index: 1;
    }

</style>
</head>
<body>

<div class="pane-bg">
<div class="indicator-bg">
    <h1>QUHWFHUIWHFIUFHWNWKNFWEFWEFHUIFWHEUIHFUIHWUIFHWUIFEHUIWFHWNWFUIFUI</h1>
    <h1> Привет </h1>
    <h1> XXXXXXXXXXXX </h1>
    <h1> ала ма кота </h1>
    <h1> очень маленького </h1>
</div>
</div>

</body>
</html>

Что я действительно пытаюсь достичь — это верхние и нижние индикаторы прокрутки для одного контейнера с прокруткой. Некоторое время назад я “решил” эту проблему обходным путем — создав два контейнера, и индикаторы были обычными дочерними элементами внешнего контейнера. Теперь я хочу решить это правильно, с одним контейнером. Эта техника скопирована из CSS Secrets Леи Вероу, оригинальный код здесь: https://dabblet.com/gist/20205b5fcdd834461e80

Ответ или решение

Вопрос о наложении фона родителя на детей в CSS

Введение

В современном веб-дизайне часто возникает потребность в сложной стилизации элементов. Задача, описанная в вопросе, заключается в изменении фона родительского элемента таким образом, чтобы он визуально взаимодействовал с фоном и передним планом дочерних элементов. Эта задача усложняется тем, что код дочерних элементов изменить нельзя, и необходимо учитывать такие свойства CSS, как display и z-index.

Возможности решения

Несмотря на некоторые ограничения, существуют подходы к решению данной задачи. Рассмотрим несколько методов, которые могут помочь добиться желаемого эффекта.

Использование псевдоэлементов
Псевдоэлементы ::before и ::after могут быть полезны для создания эффекта наложения фонов. Мы можем создать псевдоэлемент на родительском элементе, который будет служить фоном и использовать свойства z-index для управления порядком наложения.

Пример:
```
.pane-bg {
   position: relative; /* Убедитесь, что родительский элемент относительно позиционирован */
}

.pane-bg::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный фон */
   z-index: 0; /* Фон будет под дочерними элементами */
}
```
С помощью этого метода, псевдоэлемент будет находиться под дочерними элементами и визуально быть задействован в экране.
Использование свойств mix-blend-mode и background-blend-mode
Как упомянуто в вопросе, применять mix-blend-mode на родительском элементе может быть полезно. Однако следует помнить, что данный метод требует выполнения некоторых ограничений по контексту наложения. Это означает, что эти свойства будут работать только на тех элементах, которые находятся в одном слое наложения.

Пример:
```
.pane-bg {
   position: relative;
   background-color: rgba(255, 0, 0, 1); /* Красный фон */
   isolation: isolate; /* Создает новый контекст наложения */
}

.indicator-bg {
   mix-blend-mode: multiply; /* Измените режим наложения */
   /* остальные стили */
}
```
Это будет работать при условии, что элементы имеют подходящий контекст наложения и допускают взаимодействие.
Использование filter для прозрачности
Если вам необходимо изменить визуальное восприятие дочерних элементов, примените CSS-фильтры. Например, можно создать эффект затенения или размытия на дочерних элементах.

Пример:
```
.indicator-bg {
   filter: brightness(0.5); /* Уменьшение яркости */
   /* остальные стили */
}
```

Данное решение делает контент менее заметным, позволяя родительскому фону "выступать", но это будет зависеть от конкретных цветов и элементов вашего дизайна.

Заключение

Таким образом, реализация эффектов наложения фона между родителями и детьми в CSS является многогранной задачей, требующей внимания к контексту наложения и использованию псевдоэлементов. Приведенные выше подходы – это всего лишь некоторые из возможных решений. Правильный выбор будет зависеть от конкретных требований проекта, а также от желаемого визуального результата.

Рекомендуется тщательно тестировать каждую реализацию для достижения наилучших результатов на различных браузерах. Помните, что кроссбраузерная поддержка — важный аспект в веб-разработке.