Question

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

Answer 1

最好的方法是使用渐变色。

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

Answer 2

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 multiple bg，你可以在你的容器中插入一个新的div，它使用bg颜色好的内容

容器上的

：

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/

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

4 个答案: