將兩種背景顏色應用於文本框。

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/