我可以使用CSS3应用多个背景颜色吗？

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

目前我有一个<div> ，它需要在左边的宽度的30％左右有不同的颜色：

 div#content {background: url("./gray.png") repeat-y, white; background-size: 30%;} 

而不是加载完全灰色的图像，我怎么能指定颜色，而不需要额外的<div> s？

Answer 1

你不能真的 – 背景颜色适用于完全的元素背景。 保持简单。

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

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

但目前只有less数浏览器支持。 见http://jsfiddle.net/UES6U/2/

（另请参阅http://www.webkit.org/blog/1424/css3-gradients/获取CSS3渐变的解释，包括鲜明的颜色边界技巧。）;

Answer 2

是的可能！ 你可以使用任意数量的颜色和图像，这是正确的方法：

 body{ /* Its, very important to set the background repeat to: no-repeat */ background-repeat:no-repeat; background-image: /* 1) An image */ url(http://lorempixel.com/640/100/nature/JesusIsLord), /* 2) Gradient */ linear-gradient(to right, RGB(0, 0, 0), RGB(255, 255, 255)), /* 3) Color(using gradient) */ linear-gradient(to right, RGB(110, 175, 233), RGB(110, 175, 233)); background-position: /* 1) Image position */ 0 0, /* 2) Gradient position */ 0 100px, /* 3) Color position */ 0 130px; background-size: /* 1) Image size */ 640px 100px, /* 2) Gradient size */ 100% 30px, /* 3) Color size */ 100% 30px; } 

Answer 3

你只能使用一种颜色，但只要你想要的图像，这里是格式：

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

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}

<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>

或background: url(image1.png) center bottom no-repeat, url(image2.png) left top no-repeat;

如果您需要更多颜色，请制作纯色的图像并使用它。 我知道这不是你想听到的，但我希望它有帮助。

格式是从http://www.css3.info/preview/multiple-backgrounds/

Answer 4

在这个实况演示中，我已经通过使用：before cssselect器来实现这一点，这似乎很好地工作。

 .myDiv { position: relative; /*Parent MUST be relative*/ z-index: 9; background: green; /*Set width/height of the div in 'parent'*/ width:100px; height:100px; } .myDiv:before { content: ""; position: absolute;/*set 'child' to be absolute*/ z-index: -1; /*Make this lower so text appears in front*/ /*You can choose to align it left, right, top or bottom here*/ top: 0; right:0; bottom: 60%; left: 0; background: red; } 

 <div class="myDiv">this is my div with multiple colours. It work's with text too!</div> 

Answer 5

如果有人需要不同的颜色重复水平条纹的CSS背景，这是我如何设法实现这一点：

 body { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; } .css-stripes { margin: 0 auto; width: 200px; padding: 100px; text-align: center; /* For browsers that do not support gradients */ background-color: #F691FF; /* Safari 5.1 to 6.0 */ background: -webkit-repeating-linear-gradient(#F691FF, #EC72A8); /* Opera 11.1 to 12.0 */ background: -o-repeating-linear-gradient(#F691FF, #EC72A8); /* Firefox 3.6 to 15 */ background: -moz-repeating-linear-gradient(#F691FF, #EC72A8); /* Standard syntax */ background-image: repeating-linear-gradient(to top, #F691FF, #EC72A8); background-size: 1px 2px; } 

 <div class="css-stripes">Hello World!</div> 

Answer 6

您可以根据需要使用尽可能多的颜色和图像。

请注意，背景图像渲染的优先级是FILO，第一个指定的图像位于顶层，最后指定的图像位于底层（请参阅片段）。

 #composition { width: 400px; height: 200px; background-image: linear-gradient(to right, #FF0000, #FF0000), /* gradient 1 as solid color */ linear-gradient(to right, #00FF00, #00FF00), /* gradient 2 as solid color */ linear-gradient(to right, #0000FF, #0000FF), /* gradient 3 as solid color */ url('http://lorempixel.com/400/200/'); /* image */ background-repeat: no-repeat; /* same as no-repeat, no-repeat, no-repeat */ background-position: 0 0, /* gradient 1 */ 20px 0, /* gradient 2 */ 40px 0, /* gradient 3 */ 0 0; /* image position */ background-size: 30px 30px, 30px 30px, 30px 30px, 100% 100%; } 

 <div id="composition"> </div>