css - 给定一个带有背景图像的 ``，我如何为它的一些 `` 着色？

Question

我有一个 <map> 谁的background CSS 属性设置为 400x400 图像。

它有多个 <area>区域，每个区域都指向一些 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>

我想用纯色填充一些区域，以便它们遮盖背景图像。我假设 <area>会有背景，但这似乎不起作用:

   <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>

有没有办法用 CSS 做到这一点？

编辑:存在一些现有的但不完全相同的问题，其答案对此有所质疑，但它们要么需要使用 jQuery，要么不使用有效的 HTML。我要求提供基于 CSS 的解决方案(如果存在的话)。

Answer 1

我通过制作 <a> 来解决这个问题与 display=block和规范。我刚刚尝试为 bg-color 添加一个内联 CSS，它成功了。它将被链接(至少到目前为止)，但它将仅使用 HTML CSS 完成工作。