如何在跨区图像单元格中继续带有标题和描述的两行网格的背景颜色

Question

我有一个由两行组成的组件，其中有标题和描述。还有一个跨越两行的图像单元格。标题和描述都有背景颜色。问题是我还没想出如何继续背景颜色。

这就是我现在所拥有的。 （另请参阅此Stackblitz 示例。）

这就是我想要实现的目标。

困难在于标题或描述具有不同的长度取决于内容管理系统中的内容。

所以它也可以看起来像这样，例如

我尝试使用带有模板区域的网格以及以下 HTML 和 CSS

:root {
    --color-primary: lightblue;
    --color-secondary: orange;
    --color-tertiary: lightgreen;
}

.component {
    display: grid;
    grid-template-areas: 'headline image' 'description image';
    grid-template-rows: auto auto;
    max-width: 960px;
    outline: 2px dashed orchid;
}

.text--headline {
    grid-area: headline;
    background-color: var(--color-primary);
}

.text--description {
    grid-area: description;
    background-color: var(--color-secondary);
}

.image {
    grid-area: image;
    display: grid;
    align-content: center;
    justify-content: center;
    min-width: 200px;
    min-height: 400px;
}

.image-fake {
    width: 100px;
    height: 200px;
    padding: 8px;
    background-color: var(--color-tertiary);
}

/* For demo purposes */
.text {
    padding-inline: 8px;
}

<div class="component">
    <div class="text text--headline">
      <h1>Split Background Headline</h1>
    </div>
    <div class="text text--description">
      <p>Split Background Description</p>
    </div>
    <div class="image">
      <div class="image-fake">This is an image</div>
    </div>
</div>

有关完整代码，请参阅已经提到的Stackblitz。

没有解决方案是将

pseudo-classes

与

position: absolute

一起使用，因为那样我必须计算百分比，这总是不稳定的。

我希望

subgrid

可以在这里提供帮助，例如

    .image {
        grid-area: image;
        /* ... */

        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
    }

但这破坏了布局。

也许我对这里的子网格还不够了解，也许还有另一种解决方案。

那么你有什么提示吗？

Answer 1

使用我在这里详细介绍的技术：https://css-tip.com/overflowing-background/

.text--headline {
  border-image: conic-gradient(var(--color-primary) 0 0) fill 0//0 100vw 0 0;
}

.text--description {
  border-image: conic-gradient(var(--color-secondary) 0 0) fill 0//0 100vw 0 0;
}

完整代码

:root {
  --color-primary: lightblue;
  --color-secondary: orange;
  --color-tertiary: lightgreen;
}

.component {
  display: grid;
  grid-template-areas: 'headline image' 'description image';
  grid-template-rows: auto auto;
  max-width: 960px;
  outline: 2px dashed orchid;
  overflow: hidden;
}

.text {
  padding-inline: 8px;
}

.text--headline {
  grid-area: headline;
  border-image: conic-gradient(var(--color-primary) 0 0) fill 0//0 100vw 0 0;
}

.text--description {
  grid-area: description;
  border-image: conic-gradient(var(--color-secondary) 0 0) fill 0//0 100vw 0 0;
}

.image {
  grid-area: image;
  display: grid;
  align-content: center;
  justify-content: center;
  min-width: 200px;
  min-height: 400px;
}

.image-fake {
  width: 100px;
  height: 200px;
  padding: 8px;
  background-color: var(--color-tertiary);
}

<main>
  <div class="component">
    <div class="text text--headline">
      <h1>
        Split Background Headline
      </h1>
    </div>
    <div class="text text--description">
      <p>
        Split Background Description
      </p>
    </div>
    <div class="image">
      <div class="image-fake">This is an image</div>
    </div>
  </div>
</main>