css - Transition of one layer with multiple background layers -

i have imput field in form multiple(two) backgrounds this:

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

then i've got transition:

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

and on focus of input field:

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

basically (or should) when input field active background changes darker color transitions. box shadow makes inner effect of inside border. case when background of 1 element (only background color). when added icon on higher layer background wont change, box-shadow works. think browser confused how change color of bitmap image.

my question is: there way transition 1 layer of background (address somehow), bitmap image stay same , color change?

thank you.

edit: jsfiddle -> http://jsfiddle.net/8drtt/

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

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

the problem selector.

the #two selector stronger input:focus selector, overiding background property.

when add #two:focus selector of darker background, can no longer overridden.