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

Question

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

目前我有一个 <div>，需要在左侧约30%的宽度上具有不同的颜色：

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

我该如何指定颜色而不需要额外的 <div> 元素来加载一张完全是灰色的图片？

- Dipil

Answer 1

没问题！你可以使用任意多的颜色和图像，这里是正确的方法：

body{
/* Its, very important to set the background repeat to: no-repeat */
background-repeat:no-repeat; 

background-image:  
/* 1) An image              */ url(https://placeimg.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;
}

- Steven Lizarazo

---

为什么这不是正确答案？完全能正常工作！ - DivinesLight

喜爱忍者式传福音 :) - csvan

谢谢！虽然来晚了，但非常实用。 - DanMad

这个答案不够精确。使用渐变与尝试堆叠两种颜色完全不同！唯一的解决方案是实际上使用图片来表示颜色！ - Heitor

@Heitor，您可以在两种相同的颜色之间创建一个“渐变”，这与堆叠半透明的实心颜色相同。 - tylertrotter

Answer 2

你不能真正地这样做 - 背景颜色适用于元素背景的整个部分。保持它们简单。

相反，你可以定义一个带有尖锐颜色边界的CSS渐变背景，例如：

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

但目前只有一些浏览器支持该功能。请参见http://jsfiddle.net/UES6U/2/

（还可以看看http://www.webkit.org/blog/1424/css3-gradients/，其中解释了CSS3渐变，包括颜色边界的锐利技巧。）

- Paul D. Waite

---

可以点击这里查看一个方便生成渐变效果的方法。你可以使用“停止点”来制作实心的分割而不是渐变效果。示例。 - Thomas Shields

@Thomas：当然，我的示例实际上也进行了可靠的分割；我已经编辑了我的答案以使其更清晰。微软的这个页面很好；我听说他们正在跳过CSS渐变而选择SVG，所以很高兴看到它们似乎会在10中支持渐变。 - Paul D. Waite

我太懒了，没有检查你的示例是否进行了正确的分割 :) - 是的，我很高兴他们也正在使用 CSS 渐变。另外加一分。 - Thomas Shields

当前版本（不带-webkit-前缀）：linear-gradient(to left, grey, grey 30%, white 30%, white); - Mosh Feu

Answer 3

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

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

- Aternus

---

谢谢FILO - 这是其他答案所缺少的。 - Mr Patience

Answer 4

在这个实时演示中，我使用了:before css选择器来实现这个效果，看起来效果相当不错。

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

我认为这个方法可以很好地用于百分比条/可视化水平的展示。

这也意味着如果不必要，您不需要创建多个div，并且可以保持页面的最新状态。

- jbutler483

Answer 5

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

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/

- webLacky3rdClass

---

不需要使用图像，您可以使用线性渐变来模拟纯色，其中起始和停止颜色相同。 - Ariel

Answer 6

如果有人需要一个带有不同颜色水平条纹的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>

{{链接1：JSfiddle}}

- user2513149