合并两个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%;
    ...
}

这些是我的想法。

Answer 2

您的示例包含两个单独的div，您无法“合并”他们的背景。要实现绿色示例，您将使用一个具有渐变背景的div，然后使用其中的两个div：一个向左浮动用于“DASHBOARD”文本，另一个向右浮动用于“过滤器”部分。

试试这个：

#container {
  background: #f2f2f2; /* Old browsers */
  background: -moz-linear-gradient(left,  #f2f2f2 0%, #f00f00 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #f2f2f2 0%,#f00f00 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #f2f2f2 0%,#f00f00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2',endColorstr='#f00f00',GradientType=1 ); /* IE6-9 */
  width: 100%;
  padding: 20px;
}

#leftDiv {
  float:left;
}

#rightDiv {
  float:right;
}

.clear {
  clear: both;
}

<div id="container">
  <div id="leftDiv">LEFT</div>
  <div id="rightDiv">RIGHT</div>
  
  <!-- When using floated elements, be sure to clear -->
  <div class="clear"></div>
  </div>

Answer 3

我设法使它起作用。

我将背景和背景设置为对多个div透明。

background-color: transparent!important;  

 body {

           background: -moz-linear-gradient(50% 100% 90deg,rgba(137, 213, 224, 1) 1.28%,rgba(199, 224, 201, 1) 61.89%,rgba(233, 230, 189, 1) 100%)!important;
    background: -webkit-linear-gradient(90deg, rgba(137, 213, 224, 1) 1.28%, rgba(199, 224, 201, 1) 61.89%, rgba(233, 230, 189, 1) 100%)!important;
    background: -webkit-gradient(linear,50% 100%,50% 0%,color-stop(0.0128,rgba(137, 213, 224, 1) ),color-stop(0.6189,rgba(199, 224, 201, 1) ),color-stop(1,rgba(233, 230, 189, 1) ))!important;
    background: -o-linear-gradient(90deg, rgba(137, 213, 224, 1) 1.28%, rgba(199, 224, 201, 1) 61.89%, rgba(233, 230, 189, 1) 100%)!important;
    background: -ms-linear-gradient(90deg, rgba(137, 213, 224, 1) 1.28%, rgba(199, 224, 201, 1) 61.89%, rgba(233, 230, 189, 1) 100%)!important;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#89D5E0', endColorstr='#E9E6BD' ,GradientType=0)"!important;
    background: linear-gradient(0deg, rgba(137, 213, 224, 1) 1.28%, rgba(199, 224, 201, 1) 61.89%, rgba(233, 230, 189, 1) 100%)!important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E9E6BD',endColorstr='#89D5E0', GradientType=0)!important;
     }