Html 多模态框-纯CSS

我看了教程。我能够得到正确的结果，即使我改变了模态的相应链接到一个图像。问题是，每当我添加另一个图像并将其链接到不同的模式时，当我打开页面时，两个模式的底部都会显示出来。像这样的。（图1）单击图像时也会发生这种情况。（图2）

我将所有图像模式链接放在纯css选项卡中。这是我使用的代码

编辑（我在页面上使用的完整CSS）

HTML代码

<ul class="tabs">
        <li>
            <input type="radio" name="tabs" id="king" checked>
            <label for="king">King</label>
            <div class="tab-content">
                <a href="#saku"><img src="https://lh3.googleusercontent.com/-REZUMNTK5vA/VINOSxepDYI/AAAAAAAACA4/2ixTyaJIp4U/s2048-Ic42/1a.jpg" width="250px"></a><br>
                <a href="#ssr"><img src="https://lh3.googleusercontent.com/-e2gN0x-vlr8/VVDGF5XpVzI/AAAAAAAACA4/b1SibabLkpA/s2048-Ic42/11a.jpg" width="250px"></a>

                <div class="modal" id="saku">
                    <div class="modal-container">
                        <a href="#modal-close" class="boxclose"><span class="bf">x</span></a>
                        <div class="cardbg">
                            <span class="cardattri">q</span>
                            <span class="cardtitle">[ﾐﾀﾞﾗな寝相] Saku Kagami (SSR)</span>
                        </div><br>                      
                        <div class="story" style="font-size: 14px; text-align: center;"><img src="https://lh3.googleusercontent.com/-UFyiWZmr1AA/VGRnyG-RtQI/AAAAAAAAADU/LWENjijPlMA/s2048-Ic42/icon_story.png" width="14px" height="16px">&nbsp;何を想像した？</div><br>
                        <div class="panel">
                            <div class="front card">
                                <img src="https://lh3.googleusercontent.com/-REZUMNTK5vA/VINOSxepDYI/AAAAAAAACA4/2ixTyaJIp4U/s2048-Ic42/1a.jpg" alt="SSR1 Card" width="350px" height="438px">
                            </div>
                            <div class="back card">
                                <img src="https://lh3.googleusercontent.com/-r3CHpi4DxSw/VfVhhUpmDaI/AAAAAAAACA4/VldO2dZdhno/s2048-Ic42/1c.jpg" alt="SSR 1 CG" width="350x" height="438px">
                            </div>
                        </div><br>

                    </div>
                </div>
                <div class="modal" id="ssr">
                    <div class="modal-container">
                        <a href="#modal-close" class="boxclose"><span class="bf">x</span></a>
                        <div class="cardbg">
                            <span class="cardattri">q</span>
                            <span class="cardtitle">[ﾐﾀﾞﾗな寝相] Saku Kagami (SSR)</span>
                        </div><br>                      
                        <div class="story" style="font-size: 14px; text-align: center;"><img src="https://lh3.googleusercontent.com/-UFyiWZmr1AA/VGRnyG-RtQI/AAAAAAAAADU/LWENjijPlMA/s2048-Ic42/icon_story.png" width="14px" height="16px">&nbsp;何を想像した？</div><br>
                        <div class="panel">
                            <div class="front card">
                                <img src="https://lh3.googleusercontent.com/-e2gN0x-vlr8/VVDGF5XpVzI/AAAAAAAACA4/b1SibabLkpA/s2048-Ic42/11a.jpg" alt="SSR1 Card" width="350px" height="438px">
                            </div>
                            <div class="back card">
                                <img src="https://lh3.googleusercontent.com/-d_7dx1qF0Pc/VfViJRPBiEI/AAAAAAAACA4/UairgGEi-jc/s2048-Ic42/11c.jpg" alt="SSR 1 CG" width="350x" height="438px">
                            </div>
                        </div><br>

                    </div>
                </div>

          </div>
        </li>
  </ul>

国王


Q
[ﾐﾀﾞﾗな寝相] Saku Kagami（SSR）


何を想像した？



Q
[ﾐﾀﾞﾗな寝相] Saku Kagami（SSR）


何を想像した？

我该如何解决这个问题

---

注意：模式包含大量div，因为我在内容中包含了一个卡片动画。

如果您仅用标准文本替换锚定标记内的图像，则效果良好，如下所示：

            <a href="#saku">Link One</a>
            <a href="#ssr">Link Two</a>

因此，问题很可能出现在CSS中，其中某些内容与所放入的图像元素相冲突

---

您可能需要发布完整的代码，以便此处的用户能够更好地了解正在发生的事情。

谢谢您回答我的问题。我已经发布了我正在使用的完整代码。您介意再看一次吗？

            <a href="#saku">Link One</a>
            <a href="#ssr">Link Two</a>