Установка цвета фона только на части фона

Question

У меня есть две колонки flexbox, одна с изображением, а другая с текстом. Я хотел бы поместить div под этими двумя столбцами, как «подложка», заполненная цветом.

На этом снимке экрана показана серая рамка, которую я пытаюсь разместить под содержимым столбца.

Было бы также идеально, если бы эта «подложка» была той же высоты, что и текст. Я попытался установить вмещающую строку в position: relative, а затем создать ::after, который абсолютно позиционируется как заливка цвета, но не смог сработать.

Я создал скрипку, которая показывает моя работа до сих пор .

.cheetos-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.cheetos-row::after {
  background-color: red;
  height: 200px;
  width: 200px;
}

.cheetos-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.cheetos-column h2 {
  color: #F15A22;
}

.cheetos-column img {
  height: 500px;
  width: auto;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .cheetos-row {
    display: block;
  }
}

<div class='cheetos-row'>
  <div class='cheetos-column'>
    <p><img src="https://www.pngkit.com/png/full/154-1543048_nicolas-the-wicker-man-nic-cage-white-background.png" class="cheetos-image">
    </p>
  </div>
  <div class='cheetos-column'>

    <h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </h2>

    <p>Sed rhoncus sagittis porta. Morbi mollis aliquam turpis quis porttitor. Donec augue nisi, semper id ante sit amet, facilisis consectetur libero. Donec cursus ullamcorper eros, at congue velit lobortis vel. Nam vitae semper eros.</p>

    <p>Phasellus sagittis, neque eu finibus dictum, mi ipsum ullamcorper metus, vitae varius turpis risus eget felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.</p>

    <p>Vestibulum neque urna, scelerisque id iaculis eu, feugiat et urna.</p>

    <p>Nunc ex nibh, lobortis eu augue eget, molestie convallis lacus. Nunc ut volutpat nibh, ac cursus magna.</p>

  </div>
</div>

Answer 1

Я просто установил цвет фона с помощью свойства ::after псевдоэлемента , что-то вроде ниже фрагмента.

.cheetos-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
}
.cheetos-row::after {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  background-color: #bababa;
  height: 100%;
  width: 100%;
  z-index: -1;
}
.cheetos-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}
.cheetos-column h2 {
  color: #F15A22;
}
.cheetos-column img {
  max-height: 500px;
  width: auto;
  max-width:100%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .cheetos-row {
     display: block;
   }
}

<div class='cheetos-row'>
  <div class='cheetos-column'>
   <p><img src="https://www.pngkit.com/png/full/154-1543048_nicolas-the-wicker-man-nic-cage-white-background.png" class="cheetos-image"></p>
  </div>
  <div class='cheetos-column'>
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
    <p>Sed rhoncus sagittis porta. Morbi mollis aliquam turpis quis porttitor. Donec augue nisi, semper id ante sit amet, facilisis consectetur libero. Donec cursus ullamcorper eros, at congue velit lobortis vel. Nam vitae semper eros.</p>
    <p>Phasellus sagittis, neque eu finibus dictum, mi ipsum ullamcorper metus, vitae varius turpis risus eget felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.</p>
    <p>Vestibulum neque urna, scelerisque id iaculis eu, feugiat et urna.</p>
    <p>Nunc ex nibh, lobortis eu augue eget, molestie convallis lacus. Nunc ut volutpat nibh, ac cursus magna.</p>
  </div>
</div>

Answer 2

Это может быть возможно с серией перекрывающихся div.

Я использовал CSS grid, потому что он обеспечивает линейное размещение свойств, которые позволяют областям сетки перекрывать друг друга .

Приведенная ниже компоновка ограничивает высоту цвета фона естественной высотой текста, а также заставляет изображение отображаться с переполнением цвета фона.

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

.cheetos-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: start;
}

.cheetos-column:first-child {
  grid-column: 1 / 4;
  grid-row: 1;
  z-index: 1;
}

.cheetos-column img {
  width: 100%;
  height: 500px;
  object-fit: contain;
  object-position: top;
}

.cheetos-column:last-child {
  grid-column: 2 / -1;
  grid-row: 1;
  background-color: gray;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.cheetos-column:last-child > * {
  grid-column: 3 / -1;
}

@media (max-width: 768px) {
  .cheetos-row,
  .cheetos-column:last-child {
    display: block; /* stacks content & deactivates all grid properties */
  }
  .cheetos-column img {
    width: 100%;
    height: auto;
  }
}

.cheetos-column h2 {
  color: #F15A22;
}

<div class='cheetos-row'>
  <div class='cheetos-column'>
    <p><img src="https://www.pngkit.com/png/full/154-1543048_nicolas-the-wicker-man-nic-cage-white-background.png" class="cheetos-image">
    </p>
  </div>
  <div class='cheetos-column'>
    <h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </h2>
    <p>Sed rhoncus sagittis porta. Morbi mollis aliquam turpis quis porttitor. Donec augue nisi, semper id ante sit amet, facilisis consectetur libero. Donec cursus ullamcorper eros, at congue velit lobortis vel. Nam vitae semper eros.</p>
    <p>Phasellus sagittis, neque eu finibus dictum, mi ipsum ullamcorper metus, vitae varius turpis risus eget felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.</p>
    <p>Vestibulum neque urna, scelerisque id iaculis eu, feugiat et urna.</p>
    <p>Nunc ex nibh, lobortis eu augue eget, molestie convallis lacus. Nunc ut volutpat nibh, ac cursus magna.</p>
  </div>
</div>

jsFiddle demo