color image inside grayscale(100%) container - html

Question

I have a div with a background-image and i'm using a filter to display it in black and white (filter: grayscale(100%);). I'm now trying to place a color icon inside that div. Tried to set the icon to grayscale(0%), but this does not appear to work.
Here is an example:
#a1, #a2 {
background-image: url(http://ndrichardson.com/blog/wp-content/uploads/2012/04/colorpsychology.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
#a1 {
height: 250px;
width: 250px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
position: relative;
}
#a2 {
height: 50px;
width: 50px;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
position: absolute;
top: 0px;
right: 0px;
}
<div id="a1"><!-- << this should be black and white -->
<div id="a2"><!-- << this should be color -->
</div>
</div>
Is there a way to do this without creating an additional div to hold the background image? The real code is much more complex, that's why I would like to avoid the extra div(s), if possible.

Answer 1

Yes of course, you should use ::before and ::after pseudo-elements:
#a1 {
height: 250px;
width: 250px;
position: relative;
}
#a1:after, #a1:before {
content: '';
background-image: url(http://ndrichardson.com/blog/wp-content/uploads/2012/04/colorpsychology.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
}
#a1:before {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
width: 100%;
height: 100%;
}
#a1:after {
height: 50px;
width: 50px;
top: 0px;
right: 0px;
}
<div id="a1"></div>
DEMO on JSFiddle

Answer 2

It's not possible to have color inside a container with filter: grayscale(100%).
See the the filter property in the spec (emphasis mine):
A computed value of other than none results in the creation of a
stacking context the same way that CSS opacity does. All
the elements descendants are rendered together as a group with the
filter effect applied to the group as a whole.
So yes, you will have to separate the contents with the filter from the contents without it.
This doesn't necessarily mean you need additional wrappers in your HTML, as Hiszpan proposes you can also use pseudo-elements.