0

我有一个具有多个(两个)背景的表单输入字段,如下所示:

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/

4

1 回答 1

1

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

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

问题是选择器。

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

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

于 2013-04-20T17:37:18.443 回答