Html 多种背景颜色，css中的图像

如何在CSS中为单个

div

提供多种背景色或图像？例如，我希望顶部是红色，然后中间是蓝色，底部是绿色。

一个线性渐变作为背景就足够了

background: linear-gradient(to bottom, 
    red 0, red 33.33%, 
    blue 0, blue 66.66%, 
    green 0, green 100%
);

---

|

在css3中使用渐变。

YourDIVID {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
  background: linear-gradient(red, yellow, green); /* Standard syntax */
} 

---

单色线的上、下、中多色教程

}

用于在单个元素上具有三个不同的背景层（颜色和图像）

注意：此解决方案要求包装包含的元素，使其保持在背景之上。否则，链接可能无法单击，文本不可选择等

运行工作示例的代码段

。分层背景{
背景色：#C63；
背景图片：url(https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png);
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
位置：相对位置；
高度：400px；
z指数：1；
}
.分层背景：之前{
位置：绝对位置；
内容：“；
排名：0；
高度：120px；
宽度：100%；
背景：#39C；
z指数：2；
不透明度：0.8；
}
.分层背景：之后{
位置：绝对位置；
内容：“；
底部：0；
高度：120px；
宽度：100%；
背景：#9C3；
z指数：3；
不透明度：0.8；
}
.分层背景.内容{
位置：相对位置；
z指数：4；
}

和可选择的内容。

Hi，看一下这个线程。美好的你能解释一下没有%符号的0是怎么做的吗？这就是颜色停止的工作原理：当你设置一个颜色停止时，它会自动设置为之前定义的最大值。因此，它相当于写入

红色0、红色33.33%、蓝色33.33、蓝色66.66%、绿色66.66、绿色100%

，但重复值较少（例如，如果将66.66更改为80%，则应将该值更改两次）

#multiple {
width: 700px;
height: 500px;
background:linear-gradient(red, yellow, green, blue, purple, orange);