html - 仅在背景的一部分上设置背景颜色

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>

标签： htmlcssflexbox

Answer 1

一系列重叠的 div 可能是可能的。

我使用 CSS 网格是因为它提供了基于行的放置属性，允许网格区域相互重叠。

下面的布局将背景颜色的高度限制为文本的自然高度，同时也让图像看起来溢出了背景颜色。

根据您的媒体查询，它会在较小的屏幕上切换到单列布局。

.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 演示