如何去除PNG图片透明区域以解决交互遮挡问题？

我先导入了一张正常图片，接着用Photoshop把它分割成多个PNG文件，将这些分割后的图片依次叠放，最终实现了鼠标悬停某张图片时其余图片消失的交互效果。但最后一张图片的透明区域会干扰其他图片的交互，请问怎么去除这个透明区域的影响？

HTML代码 #

<Html>
    <head>
        <title>Class 2bac svt-2</title>
        <link rel="stylesheet" href="Css.css">
    </head>
    <body>
        <center>
            <h1 class="Title">2Bac-Svt-II</h1>
            <div>
                <img src="Images/All-black&White.png" alt="All" class="All">
                <img id="Gays" src="Images/A7meed.png" alt="All" class="A7meed">
                <img id="Gays" src="Images/Wahid.png" alt="All" class="Wahid">
                <img id="Gays" src="Images/3azi.png" alt="All"Class="3azi">
                <img id="Gays" src="Images/3chir Piza.png" alt="All"Class="3chir piza">
                <img id="Gays" src="Images/Joker Dial Maryoula.png" alt="All" class="JDM">
                <img id="Gays" src="Images/Mister.png" alt="All" class="Mister">
                <img id="Gays" src="Images/Piza.png" alt="All" class="Piza">
                <img id="Gays" src="Images/Naser.png" alt="All" class="Naser">
                <img id="Gays" src="Images/Nasiri.png" alt="All" class="Nasiri">
                <img id="Gays" src="Images/Taha.png" alt="All" class="Taha">
                <img id="Gays" src="Images/Jawad.png" alt="All" class="Jawad">
                <img id="Gays" src="Images/Hedaya 3ad Lmath.png" alt="All" class="H3m">
                <img id="Gays" src="Images/Hamoudo.png" alt="All" class="Hamodo">
                <img id="Gays" src="Images/Himi.png" alt="All" class="Himi">
                <img id="Gays" src="Images/Balon.png" alt="All" class="Balon">
                <img id="Gays" src="Images/M5inzaaaaa.png" alt="All" class="M5inza">
                <img id="Gays" src="Images/Monir.png" alt="All" class="Monir">
                <img id="Gays" src="Images/Carasko.png" alt="All" class="Carasko">
                <img id="Gays" src="Images/Francai.png" alt="All" class="Francai">
            </div>
            <label>Zoom 100% !!!! </label>
        </center>
    </body>
</Html>

CSS代码 #

body{
    background-color: black;
}
.title{
    color: white;
    font-family: fantasy;
}
img[id="Gays"]{
    height: 70%;
    display: block;
    margin-top: -518.7px;
}
.All{
    display: block;
    height: 70%;
}
label{
    color: red;
}
@media screen and (max-width:1000px){
    img[id="Gays"]{
        height: 70%;
        display: block;
        margin-top: -511.7px;
    }
}

针对透明区域干扰交互的问题，有几个直接可行的办法：

1. 直接裁剪图片的透明区域 #

打开最后那张有问题的PNG，用Photoshop的裁剪工具框选仅包含不透明内容的区域，裁剪完成后重新导出PNG。这样图片的点击区域就只保留实际内容部分，不会有多余透明区域遮挡下面的图片。

2. 用CSS限制可交互区域 #

如果不想修改图片，可以给最后一张图片添加CSS样式，让透明区域不接收鼠标事件：

/* 方法一：直接让透明区域不响应鼠标事件 */
img[class="Francai"] {
  pointer-events: none;
}

/* 方法二：精准裁剪可交互区域（更推荐） */
img[class="Francai"] {
  /* 替换XX为实际数值，仅保留图片的不透明区域 */
  clip-path: inset(XXpx XXpx XXpx XXpx);
  pointer-events: auto;
}

clip-path可以精准定义图片的可交互范围，把透明部分排除在外，鼠标只会在裁剪后的区域触发交互。

3. 调整图片层级 #

如果最后那张图片仅用于显示、不需要交互，直接把它移到HTML结构的最前面（所有分割图的上方），让它处于层级最底层，这样它的透明区域就不会覆盖在其他可交互图片上方，自然不会干扰。

你的HTML代码存在一个基础错误：所有分割后的图片都使用了同一个id="Gays"，但HTML中id必须是唯一的，多个元素不能共用同一个id。建议把所有id="Gays"改成class="Gays"，然后修改CSS选择器为.Gays，避免出现不可预见的交互或样式问题。

修改后的CSS对应部分：

.Gays {
    height: 70%;
    display: block;
    margin-top: -518.7px;
}
@media screen and (max-width:1000px){
    .Gays {
        height: 70%;
        display: block;
        margin-top: -511.7px;
    }
}

内容的提问来源于stack exchange，提问作者AHMED