一层与多个背景层的过渡

Question

我有一个具有多个（两个）背景的表单输入字段，如下所示：

background: url(framework/images/search.png) no-repeat 6px 7px, 
/*this is a magnifying glass icon - this is important later */
                rgba(200,200,200,0.1);

然后我有一个过渡：

transition:background 0.2s linear, box-shadow 0.5s linear;

并且在输入字段的焦点上：

input:focus, {
background:rgba(0,0,0,0.1);
box-shadow:0px 1px 0px rgba(0,0,0,0.1) inset;
}

基本上它所做的（或应该做的）是当输入字段处于活动状态时，背景会随着过渡而变为稍暗的颜色。盒子阴影也产生了内部边框的内部效果。当背景是一个元素（只有背景颜色）时就是这种情况。现在，当我在较高层添加图标时，背景不会改变，但 box-shadow 有效。我认为浏览器对如何更改位图图像的颜色感到困惑。

我的问题是：有没有办法只转换一层背景（以某种方式解决它），以便位图图像保持不变并且颜色会改变？

谢谢。

编辑：Jsfiddle -> http://jsfiddle.net/8DRTt/

Answer 1

http://jsfiddle.net/8DRTt/1/

input:focus, #two:focus {...}

问题出在选择器上。

#two 选择器比 input:focus 选择器强，因此覆盖了背景属性。

当您将#two:focus 添加到较暗背景的选择器时，它不能再被覆盖。