时间戳

首页 > 解决方案 > 响应式重叠图像

html - 响应式重叠图像

问题描述

我正在制作一个带有背景图像（在 div 中）的主页，并且该图像中有几个可点击的区域，这些区域可以带到网站的其他页面。此部分是锚点，可在鼠标悬停时更改其区域的图像。所有图像都是 .svg 并且锚点处于绝对位置。这是我的问题：当我缩小窗口时，背景中的图像会自行适应窗口，但锚不会并保持在其位置，但我希望它们也能适应窗口。我尝试使用 max-width 和 min-width 但我没有解决问题，可能是因为它们处于绝对位置。有一种方法可以调整锚点的大小并使其适应背景中的图像？我使用 HTML 和 CSS，但我不懂 Javascript。这是我的代码：

    <html>
        <head>
            <style>
                a:hover {
                    background-image: url('../immaginisito/living_Tavola disegno 1.svg'); background-size:cover;
                }
                a:active {
                    background-image: url('../immaginisito/living_Tavola disegno 1.svg'); background-size:cover;
                }
                .background {
                    overflow:visible;
                }
            </style>
        </head>
        <body>

               <div class='background' style="position:relative; height:600px; background-repeat: no-repeat; background-image:url('../immaginisito/Loft_Vierre_Tavola disegno 1.svg'); background-size:cover;">
                <a id="a" onclick="changeOpacity('a')" style="position:absolute; top:114px; left:4px; width:74px; height:40px;" title="#f" alt="#f" href="#f" target="_self"></a>
                <a id="b" onclick="changeOpacity('b')" style="position:absolute; top:85px; left:163px; width:114px; height:48px;" title="aa" alt="aa" href="#a" target="_self"></a>
                <a id="c" onclick="changeOpacity('c')" style="position:absolute; top:180px; left:60px; width:88px; height:30px;" title="#b" alt="#b" href="#b" target="_self"></a>
                <a id="d" onclick="changeOpacity('d')" style="position:absolute; top:132px; left:313px; width:118px; height:65px;" title="#c" alt="#c" href="#c" target="_self"></a>
                <a id="e" onclick="changeOpacity('e')" style="position:absolute; top:208px; left:762px; width:133px; height:300px;" title="#e" alt="#e" href="#e" target="_self"></a>
            </div>
        </body>
        <style type="text/css"></style>
    </html>
    <script>
     function changeOpacity(id) {
         document.getElementById(id).style.backgroundImage = "url('../immaginisito/living_Tavola disegno 1.svg')";
        }
    </script>

标签： htmlcss

解决方案

尝试使用 display:grid 功能而不是 position 来调整响应式屏幕，因此从子 div 中删除 position:absolute 和从父 div 中删除 positon:relative 并将其放入父 div

.background{
display:grid
grid-template-row:1fr 1fr;
grid-template-column:1fr 1fr;
}

推荐阅读