将两种背景颜色应用于文本框。

Question

我有一个文本框，我想应用背景颜色。虽然我了解如何应用一种背景颜色，但我想知道我可以将一种颜色应用于75％的框和25％的框到另一个颜色。

Answer 1

最好的办法是使用渐变。

http://www.colorzilla.com/gradient-editor/

Answer 2

这里是Solution。

的HTML：

<div class="dualColor">&nbsp;</div> 
<div>&nbsp</div> 
<input class="dualColor" type="text" /> 

的CSS：

.dualColor{background: #1dff00; /* Old browsers */ 
background: -moz-linear-gradient(left, #1dff00 0%, #1dff00 75%, #ff0004 75%, #ff0004 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1dff00), color-stop(75%,#1dff00), color-stop(75%,#ff0004), color-stop(100%,#ff0004)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, #1dff00 0%,#1dff00 75%,#ff0004 75%,#ff0004 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, #1dff00 0%,#1dff00 75%,#ff0004 75%,#ff0004 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, #1dff00 0%,#1dff00 75%,#ff0004 75%,#ff0004 100%); /* IE10+ */ 
background: linear-gradient(to right, #1dff00 0%,#1dff00 75%,#ff0004 75%,#ff0004 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1dff00', endColorstr='#ff0004',GradientType=1); /* IE6-9 */ 
height:20px; width:200px; border:none; 
} 

编辑

您可以将双色调既div和文本框。

希望这会有所帮助。

Answer 3

或者你可以使用的box-shadow为： check this fiddle

对于垂直：

.text{ 
    -webkit-box-shadow: 0 5px #000 inset, 0 -5px #000 inset; 
    background: transparent; 
    border: 0; 
} 

对于水平：你不能用百分比箱

.text2{ 
    width: 100px; 
    -webkit-box-shadow: 25px 0 #999 inset, -75px 0 #444 inset; 
    background: transparent; 
    border: 0; 
} 

注阴影，所以这种方法只适用于固定的宽度/高度，如果你需要百分比像值。

Answer 4

如果你不想使用CSS3多个BG， 您可以在容器中插入一个新的div，下的内容去谁与良好的背景颜色

在容器上：上

position:relative; 
background:purple; /* primary color */ 

第二个背景DIV：

position:absolute; 
/* pos and size into the container */ 
left:20%; 
top:20%; 
width:60%; 
height:60%; 
background:yellow; /* secondary color */ 

和你最初的内容必须被包裹，包裹得：

position:relative; 

http://jsfiddle.net/r043v/T7gyx/