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

Can I apply multiple background colors with CSS3?

提问by Dipil

I know how to specify multiple background images using CSS3 and modify how they are displayed using different options.

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

Currently I have a <div>, which needs to have a different color for about 30% of the width on the left side:

目前我有一个<div>，它需要为左侧约 30% 的宽度使用不同的颜色：

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

Instead of loading the image which is totally gray, how can I do this specifying the color, and without additional <div>s?

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

回答by Steven Lizarazo

Yes its possible! and you can use as many colors and images as you desire, here is the right way:

是的，它可能！您可以根据需要使用尽可能多的颜色和图像，这是正确的方法：

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/John3-16/), 
/* 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;
}

回答by Paul D. Waite

You can't really — background colours apply to the entirely of element backgrounds. Keeps 'em simple.

你真的不能 - 背景颜色适用于整个元素背景。让他们保持简单。

You could define a CSS gradient with sharp colour boundaries for the background instead, e.g.

您可以为背景定义一个带有鲜明颜色边界的 CSS 渐变，例如

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

But only a few browsers support that at the moment. See http://jsfiddle.net/UES6U/2/

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

(See also http://www.webkit.org/blog/1424/css3-gradients/for an explanation CSS3 gradients, including the sharp colour boundary trick.)

（另请参阅http://www.webkit.org/blog/1424/css3-gradients/了解 CSS3 渐变，包括锐利的颜色边界技巧。）

回答by webLacky3rdClass

You can only use one color but as many images as you want, here is the format:

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

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

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

<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>

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

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

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

If you need more colors, make an image of a solid color and use it. I know it's not what you want to hear, but I hope it helps.

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

The format is from http://www.css3.info/preview/multiple-backgrounds/

格式来自http://www.css3.info/preview/multiple-backgrounds/

回答by jbutler483

In this LIVE DEMOi've achieved this by using the :beforecss selector which seems to work quite nicely.

在这个LIVE DEMO 中，我通过使用:beforecss 选择器实现了这一点，它似乎工作得很好。

.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>

I thought i would add this as I feel it could work quite well for a percentage bar/visual level of something.

我想我会添加这个，因为我觉得它可以很好地用于某些东西的百分比/视觉级别。

It also means you're not creating multiple divs if you don't have to, and keeps this page up-to-date

这也意味着如果您不需要，您不会创建多个 div，并保持此页面最新

回答by Aternus

You can use as many colors and images as you desire.

您可以根据需要使用任意数量的颜色和图像。

Please note that the priority with which the background images are rendered is FILO, the first specified image is on the top layer, the last specified image is on the bottom layer (see the snippet).

请注意，渲染背景图像的优先级是 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>

回答by user2513149

In case someone needs a CSS background with different color repeating horizontal stripes, here is how I managed to achieve this:

如果有人需要具有不同颜色重复水平条纹的 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>

JSfiddle

JSfiddle