本文目錄導讀：

1. 線性漸變
2. 偽元素

CSS實現(xiàn)半邊有背景色

在CSS中，要實現(xiàn)半邊有背景色，可以使用線性漸變（Linear Gradient）或者偽元素（Pseudo-elements）來實現(xiàn)。

線性漸變

線性漸變是一種從一種顏色到另一種顏色的平滑過渡，我們可以利用線性漸變來實現(xiàn)半邊有背景色的效果。

假設(shè)我們有一個HTML元素，其樣式如下：

<div class="half-background"></div>

我們可以使用CSS的線性漸變來實現(xiàn)半邊有背景色的效果：

.half-background {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, red 50%, blue 50%);
}

在這個例子中，我們使用了紅色到藍色的線性漸變，過渡位置在元素的中間（50%），這樣，元素的左半部分會顯示為紅色，右半部分會顯示為藍色。

偽元素

另一種方法是使用偽元素，我們可以為元素添加一個偽元素，并設(shè)置其背景色，從而實現(xiàn)半邊有背景色的效果。

假設(shè)我們有一個HTML元素，其樣式如下：

<div class="half-background"></div>

我們可以使用CSS的偽元素來實現(xiàn)半邊有背景色的效果：

.half-background {
  width: 200px;
  height: 200px;
  position: relative;
}
.half-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: red;
}