給兩個背景顏色，一個div

-3

我想有我格後面兩個獨立的背景.login-section給兩個背景顏色，一個div

樣本HTML：

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

我想給兩個不同的背景顏色與.login-container DIV如圖所示在圖像

來源

2017-09-26 OBM

請閱讀「[問]」和「[MCVE]」，並指導然後按[編輯]你的問題，包括相關的信息，如HTML和CSS你已經爲了幫助您，我們可以重新創建您的問題。 –

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

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

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

來源

2017-09-26 10:54:49

-1

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

來源

2017-09-26 11:04:34

-3

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>

來源

2017-09-26 11:05:38 moughamir

給兩個背景顏色，一個div

回答

相關問題