Given a `<map>` with a background image, how can I color part of my `<area>` s?

I have one <map>

that has a background

CSS property set to 400x400.

It has several scopes <area>

, each pointing to some URL:

   <map ...>
     <area shape="rect" coords="5, 5, 10, 10"   href="http://example.com/1">
     <area shape="rect" coords="10, 20, 20, 30" href="http://example.com/2">
     ...
   </map>

      

        
        
        
      

    

I would like to paint some areas with a rich fill color so that they do not show the background image. I assumed it <area>

would have a background, but that doesn't work:

   <map ...>
     <!-- Adding `style="background-color: red"` has no effect. -->
     <area shape="rect" coords="5, 5, 10, 10"   href="http://example.com/1"
       style="background-color: red">

     <area shape="rect" coords="10, 20, 20, 30" href="http://example.com/2">
     ...
   </map>

      

        
        
        
      

    

Is there a way to do this using CSS?

Edit: There are existing but not identical questions whose answers overlap with this, but either require the use of jQuery or don't use valid HTML. I am asking for a CSS based solution if it exists.