CSS背景颜色一半白色一半黑色|极客教程

CSS背景颜色一半白色一半黑色

在网页设计中，背景颜色的选择是非常重要的，它能够影响网页的整体外观和用户体验。有时候我们希望背景色呈现两种不同的颜色，可以通过CSS来实现一半白色、一半黑色的效果。在本文中，我们将详细介绍如何通过CSS实现这种效果。

使用线性渐变实现

一种常见的方法是使用CSS的线性渐变属性。通过控制渐变的方向和颜色，我们可以轻松实现一半白色、一半黑色的背景色。

.background {
  background: linear-gradient(to right, white 50%, black 50%);
  height: 100vh; /* 设置背景高度为整个视口高度 */
}

在上面的代码中，我们定义了一个class为background的样式，通过linear-gradient属性来创建一个水平方向的线性渐变。to right表示渐变方向是从左到右，white 50%表示从左边开始到50%位置为白色，black 50%表示从50%位置开始到右边为黑色，这样就实现了一半白色、一半黑色的效果。

运行结果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Half White Half Black Background</title>
<style>
.background {
  background: linear-gradient(to right, white 50%, black 50%);
  height: 100vh;
}
</style>
</head>
<body>
<div class="background"></div>
</body>
</html>

上面的代码片段可以直接复制到HTML文件中运行，就可以看到一半白色、一半黑色的背景色效果。

使用伪元素实现

除了线性渐变，我们还可以通过CSS的伪元素来实现一半白色、一半黑色的背景色效果。具体做法是为元素的伪元素添加两个不同颜色的背景，然后利用绝对定位将伪元素叠加在原元素上。

.background {
  position: relative;
  height: 100vh;
}

.background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: white;
}

.background::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: black;
}

在上面的代码中，我们定义了一个class为background的样式，通过伪元素的::before和::after来分别创建白色和黑色的背景。::before的宽度为50%，并且位于左侧，::after的宽度也为50%，并且位于右侧，这样就实现了一半白色、一半黑色的背景色效果。

运行结果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Half White Half Black Background</title>
<style>
.background {
  position: relative;
  height: 100vh;
}

.background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: white;
}

.background::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: black;
}
</style>
</head>
<body>
<div class="background"></div>
</body>
</html>

同样地，上面的代码片段可以复制到HTML文件中运行，就可以看到一半白色、一半黑色的背景色效果。

使用多个层叠实现

除了线性渐变和伪元素，我们还可以通过多个元素进行层叠来实现一半白色、一半黑色的背景色效果。具体做法是创建两个具有不同背景颜色的元素，然后通过绝对定位将它们叠加在一起。

.background {
  position: relative;
  height: 100vh;
}

.white {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: white;
}

.black {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: black;
}

在上面的代码中，我们定义了一个class为background的容器元素，然后创建两个具有不同背景颜色的元素，一个是白色的，一个是黑色的。通过绝对定位，分别将它们叠加在容器元素上，就实现了一半白色、一半黑色的背景色效果。

运行结果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Half White Half Black Background</title>
<style>
.background {
  position: relative;
  height: 100vh;
}

.white {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: white;
}

.black {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: black;
}
</style>
</head>
<body>
<div class="background">
  <div class="white"></div>
  <div class="black"></div>
</div>
</body>
</html>

同样地，上面的代码片段可以复制到HTML文件中运行，就可以看到一半白色、一半黑色的背景色效果。

总结一下，我们可以通过CSS的线性渐变、伪元素和多个层叠等方法来实现一半白色、一半黑色的背景色效果。具体的选择取决于具体的需求和实际情况，在实际开发中可以根据自己的喜好和习惯来选择合适的方法。