javascript - 合并两个div的渐变背景

Question

我在主容器中有两个不同的 div。将它们都视为标题 div。看起来如下:

我想将他们的背景合并为一个，如下所示:

理想情况下，我应该创建一个 div，但在我的情况下，这不是一个选项。任何技巧/想法。

提前致谢。

Answer 1

背景看起来有一个绿色的从左到右的线性渐变，你不能使用相同的 CSS background 吗？像这样的东西:

div1, div2 {
    ...
    background: linear-gradient(to right, rgba(52,247,101,1) 0%, rgba(34,115,64,1) 100%);
    ...
}

或者，如果您愿意，可以使用相同的背景图像但位置不同:

div1 {
    ...
    background-image: url("background.png");
    background-position: 50% 0%;
    ...
}
div2 {
    ...
    background-image: url("background.png");
    background-position: 50% 100%;
    ...
}

那是我的想法。