给两个背景颜色，一个div

问题描述：

我想有我格后面两个独立的背景.login-section给两个背景颜色，一个div

样本HTML：

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

我想给两个不同的背景颜色与.login-container DIV如图所示在图像

请阅读“[问]”和“[MCVE]”，并指导然后按[编辑]你的问题，包括相关的信息，如HTML和CSS你已经为了帮助您，我们可以重新创建您的问题。 –

答

可以使用线性梯度的背景。

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

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

答

背景：线性梯度（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/

答

Basicly你需要使用双背景下，一个位于顶部，另一个在底部。检查这个片段看看如何。

.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%; 
 
}

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

给两个背景颜色，一个div

相关推荐