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

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 和 Text 框应用双色。

希望这可以帮助。

Answer 3

或者你可以使用 box-shadow ： 检查这个小提琴

对于垂直：

.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，该 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/