我可以在CSS3中应用多种背景颜色吗？
我可以在CSS3中应用多种背景颜色吗？
提问于 2011-06-24 00:24:06
我知道如何使用CSS3指定多个背景图像，以及如何使用不同的选项修改它们的显示方式。
目前我有一个<div>，它需要有一个不同的颜色，大约30%的宽度在左侧：
div#content {
background: url("./gray.png") repeat-y, white;
background-size: 30%;
}在没有额外的<div>的情况下，我如何指定颜色，而不是加载完全灰色的图像呢？
回答 6
Stack Overflow用户
回答已采纳
发布于 2011-06-24 00:29:49
你真的不能-背景颜色完全应用于元素背景。让它们保持简单。
您可以为背景定义一个具有清晰颜色边界的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渐变的说明，包括锐化颜色边界技巧。)
Stack Overflow用户
发布于 2013-08-27 12:12:31
是的，这是可能的！您可以根据需要使用任意多的颜色和图像，以下是正确的方法：
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;
}
Stack Overflow用户
发布于 2014-11-17 17:47:47
在这个LIVE DEMO中，我通过使用: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，并使此页面保持最新
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6457406
复制相关文章
相似问题
腾讯云开发者
