如何使用CSS在PNG图像后面放置工作菜单？

Question

我有一个PNG图像，我需要将其放入菜单中，如下图所示：

我使用position: absolute和z-index属性来完成此任务。但是当菜单位于PNG图像后面时，它根本无法工作。如何从PNG图像制作遮罩，以便在该区域菜单工作正常？

Answer 1

尝试使用您的图像屏蔽菜单，如

<div id="menu">
    <!-- put your menu here -->
</div>

<强> CSS

#menu{
        width:your_menu_width;
        height:your_menu_height;
        -webkit-mask-image: url(image_path.png);
        -o-mask-image: url(image_path.png);
        -moz-mask: url(image_path.png);
        mask-image: url(image_path.png);
}

Answer 2

您可以将其保留原样并将此样式应用于图像：

img {
  pointer-events: none;
}

缺点是它不能在IE10中工作 - 。

http://caniuse.com/#feat=pointer-events