Css 将图像显示为两行顶部的覆盖

这里使用CSS网格系统希望覆盖像徽标一样的图像，在右侧两个div顶部有边距。 我猜应该有不止一种方法，我很想知道你建议什么方法，请提供一个实例

div1和div2应在整个宽度中填充一点边距。 图像将具有一定的透明度，并且在右侧也将有一个边距，例如80px

我尝试过的代码如下所示，此时未完成其工作：

.c1Wrap{
显示：网格；
/*网格模板行：1fr 1fr 1fr 1fr*/
网格模板行：100px 100px；
}
.c1HeaderTop{
网格行：1；
背景：#db4ea5；
}
.c1HeaderBottom{
网格行：2；
背景：#831d5c；
}
.c1标志{
z指数：101；
网格行：1/2；
不透明度：0.6；
网格行：1/2；
宽度：200px；
高度：200px；
右：80px；
背景色：#222；
}

---

我不确定您是否只能使用CSS网格来实现这一点。使用绝对定位可以轻松完成：

.c1Wrap{
显示：网格；
/*网格模板行：1fr 1fr 1fr 1fr*/
网格模板行：100px 100px；
位置：相对位置；
}
.c1HeaderTop{
网格行：1；
背景：#db4ea5；
}
.c1HeaderBottom{
网格行：2；
背景：#831d5c；
}
.c1标志{
z指数：101；
位置：绝对位置；
顶部：10px；
右：10px；
不透明度：0.6；
宽度：180px；
高度：180像素；
背景色：#222；
}

---

答案是通过重叠单元格，我们还需要定义列。 它会给我们确切的结果

.c1Wrap{
显示：网格；
网格模板行：100px 100px；
网格模板列：1fr 1fr 200px；
}
.c1HeaderTop{
网格行：1；
网格柱：1/4；
背景：#db4ea5；
}
.c1HeaderBottom{
网格行：2；
背景：#831d5c；
网格柱：1/4；
}
.c1标志{
z指数：101；
网格行：1/3；
网格柱：3；
不透明度：0.6；
背景色：rgb（134133133）；
}

文件

是的，感谢您提到，我试图避免绝对定位，我想这可以由CSS网格本身完成。