1. 背景介绍
网页设计的背景是网页视觉效果的重要部分，通过设置不同的背景可以使网页呈现出不同的风格和氛围。在CSS中设置背景有许多种方式，可以设置背景颜色、背景图片、背景渐变等等。在本篇文章中，我们将介绍如何使用CSS设置一半背景。
2. 使用CSS设置一半背景
首先，我们需要准备两个不同的颜色或背景图片，用于设置一半背景。接下来，我们需要使用linear-gradient函数创建一个线性渐变背景色或渐变背景图片。例如，下面的代码将使用红色和蓝色两种背景颜色来设置一半背景：
body {
background: linear-gradient(to right, red 50%, blue 50%);
}
2.1 线性渐变函数
线性渐变函数linear-gradient可以创建一个线性渐变背景色或图片。它需要至少两个颜色值作为参数，指定渐变起始点和结束点的位置和颜色，语法如下：
background: linear-gradient([direction], color-stop1, color-stop2, ...);
其中，必须指定至少两个颜色值作为参数，用于设置两端的渐变色值。可以使用角度或方向值来指定渐变的方向，比如 to bottom 表示从上到下的垂直渐变，to right 表示从左到右的水平渐变。
2.2 设置不同颜色的一半背景
以下示例将使用不同的背景颜色来设置一半背景，50%的区域是红色，50%的区域是蓝色。
body {
background: linear-gradient(to right, red 50%, blue 50%);
}
2.3 设置不同背景图片的一半背景
以下示例将使用不同的背景图片来设置一半背景，50%的区域是一张图片，50%的区域是另一张图片。
body {
background: linear-gradient(to right, url('img1.jpg') 50%, url('img2.jpg') 50%);
}
2.4 设置不同颜色和宽度的一半背景
以下示例将使用不同的背景颜色来设置一半背景，40%的区域是红色，60%的区域是蓝色。
body {
background: linear-gradient(to right, red 40%, blue 60%);
}
3. 总结
通过设置不同颜色或背景图片的线性渐变，我们可以很容易地实现一半背景的效果。这是一种简单而有效的方式，可以使网页呈现出不同的视觉效果和风格，增强网页的吸引力和可读性。