使用CSS填充背景 - 兩種不同的顏色和一種重疊的另一種

我可以使用CSS創建這種填充（沒有圖像作爲背景）以及如何使用CSS？使用CSS填充背景 - 兩種不同的顏色和一種重疊的另一種

我的意思是 - 我有兩個div填充有兩種顏色，但我只能在正規的顏色填補他們，但我需要一個「重疊」的一部分。

也許我需要兩個div，並用background-color和第三個div填充它們以「兩個重疊」的背景顏色。但是，我不知道如何創建這個重疊的部分。

2015-10-29 renathy

我不能看到從工作場所的圖像，但你需要css漸變？https：//developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient – imGaurav

我不知道我已經理解你的問題。你想要2個div重疊並且重疊爲重疊顏色？所以如果你有紫色和黑色的div，重疊的顏色應該是紫色/黑色的顏色？ – gudthing

@renathy：我最初沒有添加線性漸變標記，因爲我不確定這是否是您想要的。希望您現在無需擔心標籤添加。如果您有任何問題，請隨時回滾。 – Harry

當然，您可以使用多個元素並重疊它們，但最簡單的方法是使用角度爲linear-gradient的背景，如下面的代碼片段所示。使第一種顏色的停止點作爲第二種顏色的起點，使得漸變輸出看起來像2個單色，而不是逐漸變化。（注：我已經加入0.5％的增量到第二顏色的顏色開始，因爲成角度的梯度通常產生鋸齒狀邊緣並且這避免了它。）

.two-colors { 
 
    height: 75px; 
 
    width: 400px; 
 
    background-image: linear-gradient(135deg, blue 60%, black 60.5%); 
 
}

<div class='two-colors'></div>

來源

2015-10-29 12:31:46 Harry

使用CSS填充背景 - 兩種不同的顏色和一種重疊的另一種

回答

相關問題