卡卡網(wǎng)

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

demodownload

CSS分割背景顏色

HTML：

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

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

CSS：

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

*{
  padding: 0;
  margin: 0;
}

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

背景的實(shí)際分割是通過(guò)使用帶有線(xiàn)性漸變選項(xiàng)的 'background' CSS 屬性來(lái)完成的。請(qǐng)注意，我們使用的是“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;
}

效果這樣：

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

如何分割div背景顏色？

但是如果我們想分割一個(gè)具有自定義寬度和高度的“div”的背景，而不是整個(gè)屏幕呢？這樣不難實(shí)現(xiàn)，返回 HTML 文件，創(chuàng)建一個(gè)類(lèi)名為 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é)

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

相關(guān)文章

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

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