使用CSS重现Chrome的“Inspect Element”功能

Question

在Chrome中，如果右键单击某个元素并选择“检查元素”，则会打开开发人员工具，并且您的元素将以蓝色突出显示。我想用我自己的CSS风格重现它。这是一个例子：

请注意，它实际上使元素的前景色为透明蓝色。天真地改变背景颜色几乎不起作用，因为您还必须更改字体颜色，否则您将无法突出显示图像。

目前我唯一可以弄清楚如何重现前景蒙版效果的方法是在原始图像上创建一个绝对定位的元素，其尺寸完全相同。这看起来有点笨重，我想知道是否有一些纯粹用CSS的方法呢？