卡卡網(wǎng)

把純色背景換成兩種或多種顏色，又或者是漸變背景顏色，你的網(wǎng)頁就會立即煥然一新。在本文中，將介紹如何用CSS把背景分為兩種顏色。實現(xiàn)方法其實很簡單，并不需要任何復(fù)雜的代碼。

demodownload

CSS分割背景顏色

HTML：

我們不需要在 HTML 文件中添加任何東西來完成這項工作，但是讓我們添加一條消息，以便你可以看到我們可以像任何其他普通背景一樣在拆分背景上添加文本。

<h1>你的內(nèi)容在這里！</h1>

CSS：

從元素中刪除默認(rèn)的填充（padding）和邊距（margin）。

*{
  padding: 0;
  margin: 0;
}

現(xiàn)在將 body 元素的高度設(shè)置為最小 100vh，以便分割背景可以覆蓋整個窗口大小。

背景的實際分割是通過使用帶有線性漸變選項的 'background' CSS 屬性來完成的。請注意，我們使用的是“to right”，這意味著我們的顏色將垂直顯示。

但是我們?nèi)绾卧O(shè)置這兩種顏色呢？我們將“pink”的第一種顏色設(shè)置為從 0% 到 50%，并將“paleturquoise”的第二種顏色設(shè)置為 50% 到 100%。

添加彈性框?qū)傩裕?code>display: flex;）只是為了將文本放置在屏幕中間。

body{
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(
    to right,
    pink 0%,
    pink 50%,
    paleturquoise 50%,
    paleturquoise 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
}

效果這樣：

如果你希望背景水平分割而不是垂直分割，請將線性漸變中的選項從“to right”更改為“to top”。這是新的輸出：

如何分割div背景顏色？

但是如果我們想分割一個具有自定義寬度和高度的“div”的背景，而不是整個屏幕呢？這樣不難實現(xiàn)，返回 HTML 文件，創(chuàng)建一個類名為 container 的“div”，然后將消息放入其中。

<div class="container">
  <h1>你的內(nèi)容在這里！</h1>
</div>

在CSS，用“.container”代替 body ，然后改為你想要的寬度和高度，例如 600x400。

.container{
  width: 600px
  min-height: 400px;
  background: linear-gradient(
    to right,
    pink 0%,
    pink 50%,
    paleturquoise 50%,
    paleturquoise 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
}

結(jié)果顯示這樣：

總結(jié)

本文通過實例介紹了如何用CSS把背景分為兩種顏色，這只是一個知識點，理解了這個知識點，你可以創(chuàng)建很多不同的背景樣式，例如多彩的、漸變的等等。

相關(guān)文章

• 【10個示例】了解CSS linear-gradient()背景顏色漸變
• 簡單實例解釋：background:-webkit-gradient() color-stop()
• CSS-Ribbons 漸變色帶樣式實例【演示/源碼下載】
• css ribbons(3D帶狀)設(shè)計，適合標(biāo)題使用

標(biāo)簽: css  背景顏色  background  背景顏色漸變