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

Question

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

目前我有一个<div>,需要在左侧宽度的30%左右有不同的颜色:

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

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

Answer 1

是的可能!你可以根据需要使用尽可能多的颜色和图像,这是正确的方法:

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

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渐变的解释,包括尖锐的颜色边界技巧.)

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>

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，并保持此页面最新