我可以用CSS3应用多种背景色吗？

我知道如何使用CSS3指定多个背景图像，并使用不同的选项修改它们的显示方式

目前我有一个

，它需要在左侧宽度的30%左右使用不同的颜色：

div#内容{
背景：url（“./gray.png”）重复-y，白色；
背景大小：30%；
}

---

不加载完全灰色的图像，我如何指定颜色，而不需要额外的

s？

您不能真正地-背景颜色应用于整个元素背景。保持简单

你可以为背景定义一个带有清晰颜色边界的CSS渐变，例如

background: -webkit-linear-gradient(left, grey, grey 30%, white 30%, white);

但目前只有少数浏览器支持这一点。看

---

（另请参见CSS3渐变的说明，包括锐利的颜色边界技巧。）

您只能使用一种颜色，但可以使用任意数量的图像，以下是格式：

background: [ <bg-layer> , ]* <final-bg-layer>

背景：[，]*

---

=||[/]？| | | |
 是的，这是可能的！您可以根据需要使用任意多的颜色和图像，以下是正确的方法：


正文{
/*将背景重复设置为：no repeat是非常重要的*/
背景重复：无重复；
背景图像：
/*1）图像*/url(http://lorempixel.com/640/100/nature/John3-16/), 
/*2）渐变*/线性渐变（向右，RGB（0,0,0），RGB（255,255,255）），
/*3）颜色（使用渐变）*/线性渐变（向右，RGB（110175233），RGB（110175233））；
背景位置：
/*1）图像位置*/0，
/*2）梯度位置*/0 100px，
/*3）颜色位置*/0 130px；
背景尺寸：
/*1）图像大小*/640px 100px，
/*2）梯度尺寸*/100%30px，
/*3）颜色大小*/100%30px；
}
在本文中，我通过使用css选择器实现了这一点，该选择器似乎工作得很好


.myDiv{
位置：相对；/*父项必须是相对的*/
z指数：9；
背景：绿色；
/*在“父级”中设置div的宽度/高度*/
宽度：100px；
高度：100px；
}
.myDiv:以前{
内容：“；
位置：绝对；/*将“child”设置为绝对*/
z-索引：-1；/*将此值调低，使文本显示在前面*/
/*您可以在此处选择左对齐、右对齐、上对齐或下对齐*/
排名：0；
右：0；
底部：60%；
左：0；
背景：红色；
}
这是我的div，有多种颜色。它也适用于文本如果有人需要具有不同颜色重复水平条纹的CSS背景，我是如何做到这一点的：


正文{
字体系列：“Lucida Grande”，“Helvetica Neue”，Helvetica，Arial，无衬线；
字体大小：13px；
}
.css条纹{
保证金：0自动；
宽度：200px；
填充：100px；
文本对齐：居中；
/*对于不支持渐变的浏览器*/
背景色：#F691FF；
/*Safari 5.1至6.0*/
背景：-webkit重复线性梯度（#F691FF，#EC72A8）；
/*歌剧11.1至12.0*/
背景：-o-重复线性梯度（#F691FF，#EC72A8）；
/*Firefox 3.6至15*/
背景：-moz重复线性梯度（#F691FF，#EC72A8）；
/*标准语法*/
背景图像：重复线性渐变（到顶部，#F691FF，#EC72A8）；
背景尺寸：1px2px；
}
你好，世界您可以根据需要使用任意多的颜色和图像

请注意，渲染背景图像的优先级为FILO，第一个指定的图像位于顶层，最后一个指定的图像位于底层（请参见代码段）


#合成{
宽度：400px；
高度：200px；
背景图像：
线性渐变（向右，#FF0000，#FF0000），/*渐变1为纯色*/
线性渐变（向右，#00FF00，#00FF00），/*渐变2为纯色*/
线性渐变（向右，#0000FF，#0000FF），/*渐变3为纯色*/
url（'http://lorempixel.com/400/200/“）；/*图像*/
背景重复：不重复；/*与不重复、不重复、不重复相同*/
背景位置：
0 0，/*梯度1*/
20px 0，/*梯度2*/
40px 0，/*梯度3*/
0；/*图像位置*/
背景尺寸：
30px 30px，
30px 30px，
30px 30px，
100% 100%;
}

有关生成渐变的简便方法，请参见。您可以使用“停止”来进行实体分割，而不是渐变@托马斯：当然，我的例子实际上也有一个实体分割；我编辑了我的答案，使之更清楚。来自微软的漂亮页面；我听说他们跳过CSS渐变来支持SVG，所以很高兴看到他们在10中支持渐变。我懒得检查你的示例是否进行了实心拆分：）-是的，我很高兴他们也在做CSS渐变+1，顺便说一句。当前版本（不带
-webkit-
前缀）：
线性渐变（向左，灰色，灰色30%，白色30%，白色）不，可以使用开始和停止颜色相同的线性渐变来模拟纯色。你不需要图像。为什么这不是正确的答案？很好用！爱忍者布道：）谢谢你！晚会迟到了，但很方便。这个答案不准确。使用两种颜色的渐变与尝试叠加两种颜色完全不同！颜色的唯一解决方法是使用图像@Heitor您可以在两种相同颜色之间创建“渐变”，这与堆叠半透明纯色相同。