Question

我的网站有一个启动页面，它作为主要div上的背景图像实现：

#main
{
    background:url('../img/splash.jpg');
    background-repeat:no-repeat;
    width:1024px;
    height:768px;
    margin:auto;
}

...
<body>
     <div id="main">
     ...
     </ div>
</body>
...

问题是我希望将背景图片的一部分点击进入我们的网站。我已经通过使用position：absolute：

在我想要点击的区域周围设置一个透明框来实现这一点

#logo-link 
{ 
        position: absolute; 
        top: 30px; 
        left: 350px; 
        width: 600px; 
        height: 280px; 
        background-color: transparent; 
}

...
<div>
    <a id="logo-link" href="/mylink"></a>
</div>
...

当我在屏幕上设置框时，这是有效的，但我注意到该框在其他屏幕分辨率上移动。至于具有更高分辨率的屏幕移动框以阻止表单字段在我的网站上注册！

我相信我很难实现启动页面的可点击区域，你能告诉我如何做得更好吗？

感谢。

Answer 1

[Live demo][1] ................................... 您好，现在定义**#main** position:relative;

就像这样

#main{
position:relative;
}

[Live demo][2]

HTML：使初始图像具有相对可点击区域

1 个答案: