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;
}

基本上它（或应该）当输入字段处于活动状态时，背景会随着过渡而变为稍暗的颜色。盒子阴影也会产生内部边界的内在效果。当背景是一个元素（仅背景颜色）时就是这种情况。现在，当我在更高层添加图标时，背景不会改变，但是盒子阴影可以工作。我认为浏览器很难改变如何改变位图图像的颜色。

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

谢谢。

编辑：Jsfiddle - ＆gt; http://jsfiddle.net/8DRTt/

Answer 1

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

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

问题是选择器。

#two选择器比输入：焦点选择器更强，因此覆盖了背景属性。

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

具有多个背景层的一层的过渡

1 个答案: