跨越 2 个表格行的背景图像，但具有不同的背景颜色答案

【问题标题】：Span background image across 2 table rows but have different background colors跨越 2 个表格行的背景图像，但具有不同的背景颜色
【发布时间】：2016-11-29 00:04:04
【问题描述】：

不一定是表格，也可以是 div 的。

我的图像有一些透明的部分要混合。顶部需要与下半部分不同的背景颜色混合。

所以在我看来，表格有 2 行，其中一行具有一种背景颜色，另一行具有另一种背景颜色，但图像跨越两行。

这在 HTML/CSS 中是否可行。这样可以避免我将图像一分为二。

【问题讨论】：

标签： html css

【解决方案1】：

图像或行的大小是否固定？然后你可以玩背景定位和/或大小调整。

.row {
  height: 100px;
  background-image: url(http://www.fillmurray.com/1000/200);
  border: 1px solid red;
  width: 500px;
  margin: auto;
}
.one {
  background-position: top center;
  margin-top: 1em;
}
.two {
  background-position: bottom center;
  margin-bottom: 1em;
}

<div class="row one"></div>
<div class="row two"></div>

或者，从逻辑上讲，虽然将“行”包装在 div 中并将 bg 图像放在上面可能会更容易。

.row {
  height: 100px;
  background-image: url(http://www.fillmurray.com/1000/200);
  border:1px solid red;
  width: 500px;
  margin: auto;
  
}

.wrapper {
  background-image: url(http://www.fillmurray.com/1000/200);
  width: 500px;
  background-position: center;
  margin: 1em auto;
}

.wrapper .row {
  background-image: none;
}

<div class="wrapper">
<div class="row"></div>
<div class="row"></div>
</div>

【讨论】：

谢谢你，但是如何让第一行的背景颜色为红色，第二行为蓝色，图像的透明部分顶部显示红色，底部显示蓝色。当我自己尝试此操作时，单元格/行颜色位于图像顶部而不是图像下方。
如果您的图像有透明部分，那么在第一个示例中，设置背景颜色，它将显示出来。第二种选择可能有点困难。这只是一个分割图像的例子。
在 IE11 中为 for 设置背景图像，然后为单元格设置背景颜色，图像被单元格的颜色覆盖，因此您看不到图像。