我知道如何使用CSS3指定多个背景图像,并修改使用不同选项显示它们的方式。我可以在CSS3上应用多种背景颜色吗?
目前,我有一个<div>
,这需要有不同的颜色左侧宽度的约30%:
div#content {background: url("./gray.png") repeat-y, white; background-size: 30%;}
不必加载这完全是灰色的图像,我该怎么办这指定的颜色,并没有额外的<div>
s?
我知道如何使用CSS3指定多个背景图像,并修改使用不同选项显示它们的方式。我可以在CSS3上应用多种背景颜色吗?
目前,我有一个<div>
,这需要有不同的颜色左侧宽度的约30%:
div#content {background: url("./gray.png") repeat-y, white; background-size: 30%;}
不必加载这完全是灰色的图像,我该怎么办这指定的颜色,并没有额外的<div>
s?
你不能真的 - 背景颜色适用于完全的元素背景。保持简单。取而代之的是,您可以为背景定义具有鲜明颜色边界的CSS渐变。
background: -webkit-linear-gradient(left, grey, grey 30%, white 30%, white);
但是目前只有少数浏览器支持。见http://jsfiddle.net/UES6U/2/
(一个解释CSS3渐变又见http://www.webkit.org/blog/1424/css3-gradients/,包括尖锐的颜色边界招)
,你想,你可以只用一个颜色,而是尽可能多的图片,下面是格式:
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;
如果您需要更多颜色,请制作纯色图像并使用它。我知道这不是你想听到的,但我希望它有帮助。
不,您可以使用线性渐变,其中开始和停止颜色相同以模拟纯色。你不需要图像。 – Ariel
是其可能的!和你的愿望,你可以使用尽可能多的颜色和图像,这里是正确的做法:
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;
}
为什么这不是正确答案?完美的作品! – BlackDivine
RGB像素:):http://jsfiddle.net/cfz6v5cn/2/ – userlond
爱忍者福音:) – csvan
在这种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,如果你没有,并保持这个页面了最新
万一有人需要一个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>
您可以根据需要使用尽可能多的颜色和图像。
请注意,背景图像渲染的优先级是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>
见[此](http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html)为一种方便的方法,以产生梯度,太。你可以使用“停止”来做一个坚实的分裂,而不是一个渐变。 [例子](http://jsfiddle.net/thomas4g/RaFtN/1/) –
@Thomas:当然,我的例子实际上也做了一个坚实的分裂;我编辑了我的答案,使其更清晰。那里是微软的好网页;我听说他们跳过了CSS渐变而转向了SVG,所以很高兴看到他们将支持10中的渐变效果。 –
我懒得检查您的示例是否确实实现了分裂:) - 是的,我很高兴他们也在做CSS渐变。 +1,顺便说一句。 –