For Firefox, you'll need to add an svg filter to your page.http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
And then the way I do it as I give my layers an "id", so something likeosm = new esri.layers.OpenStreetMapLayer({
id: 'osmLayer'
});
Then in the CSS you can do this.#map_osmLayer img
{
filter: url(filters.svg#grayscale) !important; /* Firefox 3.5+ - notice the svg from above */
filter: gray !important; /* IE5+ */
-webkit-filter: grayscale(1) !important; /* Webkit Nightlies; Chrome Canary */
}
That way you get control of individual layers, which is pretty cool.If you have chrome, there is a whole suite of cool css filters you could play with for your basemaps.http://www.odoe.net/apps/mapstyler/