Как правильно реализовать изменения цвета блока при нахождении его в другой секции?

Question

[stetxems]

Как бы вы реализовали такой блок, что б и адаптив нормальный получался и блок всегда находился на 50% поверх друого и не разъезжался при добавлении контента

spoiler

Comments

[Ankhena]

Варианты на выбор
1. Просто фон и центровщик с фоном.
2. Центровщик с фоном и псевдо на всю ширину с другим фоном.

Градиентом, как советуют в ответах, не выйдет, т.к. при переполнении уедет.

[Фин Дел]

Ankhena, ну зачем же вы так

Answer 1

[Фин Дел]

Comments

[Ankhena]

Разъедется при переполнении

[Фин Дел]

Ankhena,

[Ankhena]

Фин Дел,

ну зачем же вы так

это не я, это геометрия злая
https://jsfiddle.net/jqnutcoL/

[Фин Дел]

Ankhena, если делать в таком масштабе то можно задавать фиксированное значение .block, ну такое квазимодо навряд ли будет, и ещё скорее всего текст будет адаптирован под низкие разрешения, да и если делать как вы отправили это вообще будет не эстетично выглядеть что допустим первый белый блок будет обильно наполнен текстом и во втором сером 2 слова это тоже надо учитывать

[Ankhena]

Фин Дел, во-первых, вопрос придумала не я. А в вопросе "и не разъезжался при добавлении контента".
Во-вторых, контент, обычно, добавляет клиент и наше дело писать код так, чтобы ничего никуда не разъезжалось, а не объяснять ему "тут не трогай". Тем более, что последнее занятие малоэффективно.

Такой градиент в данном случае не даст гарантированного решения. В одном блоке контент чуть раньше перенесся на вторую строку, чем в другом и кирдык градиенту.
Или попросили увеличить шрифт или line-height, надо вспомнить ещё и о градиенте.
Вот и всё.

Не смотря на то, что я очень люблю решения с градиентами.

[Фин Дел]

Ankhena,
вот то что вы хотели для вас с любовью сделал :)

[Фин Дел]

Ankhena, могли бы своё решение отправить чем такой большой текст мне писать ;D

[Ankhena]

Фин Дел,

вот то что вы хотели для вас с любовью сделал :)

Спасибо :) :)
Я об этом и писала в комментарии.
Альтернатива: псевдоэлементы шириной 100vw вместо доп.обертки.

Всё, как обычно при решении задач типа "контент по центру, фон по ширине"

[Фин Дел]

Ankhena, а я вот не понял этого

1. Просто фон и центровщик с фоном.

сколько лет этим занимаюсь, правда не понял. думаю человек задавший такой вопрос подавно бы не сообразил

[Ankhena]

Фин Дел, центровщик - устоявшееся обозначение класса ограничивающего ширину с горизонтальными margin auto. Часто имеет название container. Либо задается вторым классом к элементу либо примешивается в препроцессоре.

[Фин Дел]

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

[Ankhena]

Фин Дел, спрашивающий тут тусит уж скоро год. А такие задачи с фоном и контентом обычно возникают, действительно, на первых неделях обучения. И элементарно гуглятся. Причем с примерами реализации.
О своих вопросах и отметках решениями заботится так себе. Код к вопросу не приложил. Так что считаю, что достаточно направления, куда двигаться. Если бы появились уточняющие вопросы, то несомненно ответила бы на них, как и всегда. Там может и до песочницы дело бы дошло.

Но вы молодец, а не лентяй, как некоторые (я :) ).

[Фин Дел]

Ankhena, а что тут лениться две кнопки нажал клац - клац, готово ;D