创建使用CSS

Question

多色吧，我想在下面的图片创建像一个多色彩条：

是否有可能创建CSS将实现这一目标？我已经成功使用以下CSS创建颜色的渐变：

.gold{ 
    background-color: #faa732; 
    background-image: -moz-linear-gradient(top, #eab92d, #c79810); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eab92d), to(#c79810)); 
    background-image: -webkit-linear-gradient(top, #eab92d, #c79810); 
    background-image: -o-linear-gradient(top, #eab92d, #c79810); 
    background-image: linear-gradient(to bottom, #eab92d, #c79810); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); 
} 

.blue { 
    background-color: #faa732; 
    background-image: -moz-linear-gradient(top, #034a96, #0663c7); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#034a96), to(#0663c7)); 
    background-image: -webkit-linear-gradient(top, #034a96, #0663c7); 
    background-image: -o-linear-gradient(top, #034a96, #0663c7); 
    background-image: linear-gradient(to bottom, #034a96, #0663c7); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); 
} 

.green { 
    background-color: #faa732; 
    background-image: -moz-linear-gradient(top, #0D7626, #0a611e); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0D7626), to(#0a611e)); 
    background-image: -webkit-linear-gradient(top, #0D7626, #0a611e); 
    background-image: -o-linear-gradient(top, #0D7626, #0a611e); 
    background-image: linear-gradient(to bottom, #0D7626, #0a611e); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); 
} 

我只是不知道如何使他们出现在画面像彼此相邻，以及如何有不同的百分比宽度（例如蓝色渐变50％的酒吧，绿色渐变40％，黄金渐变10％）。

Answer 1

你需要的是:before和:after伪元素。他们将内容添加到开始和结束里面给定的选择器。

HTML：

<div></div> 

CSS：

div { 
    height: 2em; 

    background-color: #faa732; 
    background-image: -moz-linear-gradient(top, #eab92d, #c79810); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eab92d), to(#c79810)); 
    background-image: -webkit-linear-gradient(top, #eab92d, #c79810); 
    background-image: -o-linear-gradient(top, #eab92d, #c79810); 
    background-image: linear-gradient(to bottom, #eab92d, #c79810); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); 
} 

div:before { 
    height: 2em; 
    width: 50%; 
    display: block; 
    content: ""; 
    float: left; 

    background-color: #faa732; 
    background-image: -moz-linear-gradient(top, #034a96, #0663c7); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#034a96), to(#0663c7)); 
    background-image: -webkit-linear-gradient(top, #034a96, #0663c7); 
    background-image: -o-linear-gradient(top, #034a96, #0663c7); 
    background-image: linear-gradient(to bottom, #034a96, #0663c7); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); 
} 

div:after { 
    height: 2em; 
    width: 40%; 
    display: block; 
    content: ""; 
    float: right; 

    background-color: #faa732; 
    background-image: -moz-linear-gradient(top, #0D7626, #0a611e); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0D7626), to(#0a611e)); 
    background-image: -webkit-linear-gradient(top, #0D7626, #0a611e); 
    background-image: -o-linear-gradient(top, #0D7626, #0a611e); 
    background-image: linear-gradient(to bottom, #0D7626, #0a611e); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); 
} 

结果：

演示：http://jsbin.com/umaden/3/edit

PS在实际使用中，您应该将其应用于类或id，而不是元素选择器。

Answer 2

好吧..如果你问我认为你在问什么，它就像这样简单。 HTML：

<table> 
    <tr> 
     <td class="color1"></td> 
     <td class="color2"></td> 
     <td class="color3"></td> 
    </tr> 
</table>  

CSS：

table { border-collapse: collapse; } 
td{ 
    width: 100px; 
    height: 20px; 
    padding: 0px; 
} 
.color1{ 
    background-color: red; 
} 
.color2{ 
    background-color: blue; 
} 
.color3{ 
    background-color: yellow; 
} 

或者类似的规定。

http://jsfiddle.net/waDFz/

这里是什么样子。您可以编辑高度/宽度/颜色/类名称。

Answer 3

您也可以使用网格，如：

<div class="my-grid"> 
<div class="col-1-3">(be yellow)</div> 
<div class="col-2-3">(be green)</div> 
<div class="col-3-3">(be blue)</div> 
</div> 

然后在CSS

.my-grid { 
width: 100%; 
} 
.col-1-3 { 
width: 33%; 
float: left; 
background-color: yellow; 
} 
.col-2-3 { 
width: 33%; 
float: left; 
background-color: green; 
} 
.col-3-3 { 
width: 33%; 
float: left; 
background-color: blue; 
} 
.my-grid:after { 
clear:both; 
} 

一定要做好我网：部分之后。

Answer 4

我会更喜欢table div。试试这个

<table> 
<tr width="300px"> 
<td style="background:#50c690; width:250px;height:25px;"></td><td style="background:#FE6; width:50px;height:25px;"></td> 
</tr> 
</table>