Question

我想在我的div .login-section

后面有两个不同的背景

示例HTML：

<div class="login-container">
  <div class="login-section"></div>
</div>

我想给.login-container div提供两种不同的背景颜色，如图所示

Vertx google group discussion

Answer 1

您可以使用线性渐变背景。

.bg {
  height: 100vh;
  background: linear-gradient(#03a2e8 0%, #03a2e8 40%, #eeeeef 40%);
}

<div class="bg"></div>

Answer 2

背景：线性渐变（0deg，rgba（255,255,255,1）0％，rgba（255,255,255,1）49％，rgba（5,193,255,1）50％，rgba（5,193,255,1）100％）;

渐变生成器http://angrytools.com/gradient/

Answer 3

基本上你需要使用双重背景，一个位于顶部，另一个位于底部。检查此代码段以了解具体方法。

＆＃13;

.container{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 600px;
  .child{
    width: 220px;
    height: 400px;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.bg{
  background: url('https://images.unsplash.com/photo-1437422061949-f6efbde0a471?dpr=1&auto=compress,format&fit=crop&w=1950&h=&q=80&cs=tinysrgb&crop=') top repeat-x, url('https://images.unsplash.com/2/04.jpg?dpr=1&auto=compress,format&fit=crop&w=1950&h=&q=80&cs=tinysrgb&crop=') bottom repeat-x;
  background-size: 50%;
}

＆＃13;

<div class="container bg">
<div class="child">
<h1>Hello</h1>
</div>
</div>

＆＃13;

为div提供两种背景颜色

3 个答案: