0

我在我的普通 HTML 网站中运行了一个背景图像。我在背景图片中添加了另一个网站的 2 个 LOGO。我如何创建一个透明的 DIV 和 LINK 仅带有徽标的部分到我的网站 当我单击徽标时，它应该在新选项卡中打开并显示网页，更像是一个热点？？？任何帮助将不胜感激！:)

这是 Box 的 CSS，

#logobox1 {
    width: 114px;
    height: 28px;
    Left: 1850;
    top: 43;    
}
#logobox2 {
    width: 92px;
    height: 40px;
    left: 1857;
    top: 40;
}
4

1 回答 1

1

我认为你想要的是一个锚标签<a>而不是一个 div。

position: absolute;我们在锚标签上使用绝对定位。为了使它工作，它的包含元素应该使用相对定位，position: relative;. 然后我们将锚标签显示设置为 block, display: block;，所以它会接受我们给它的尺寸。当然，这将是您图像的尺寸。

除此之外，将它从包含元素的顶部和左侧移动直到它位于正确的位置。

http://jsfiddle.net/UHTPX/1/

HTML

<div class="container">
    <a class="hitbox" href="google.com" target="_blank"></a>
</div>

出于说明目的，我为每个元素添加了边框。

CSS

.container {
    background: url('http://lorempixel.com/150/75/abstract/') no-repeat center center;
    border: 1px dashed #DEDEDE;
    height: 400px;
    margin: 0 auto;
    position: relative;
    width: 400px;
}
.hitbox {
    border: 1px dotted red;
    height: 75px;
    left: 50%;
    margin-left: -75px;
    margin-top: -37.5px;
    position: absolute;
    top: 50%;
    width: 150px;
}
于 2013-08-28T03:43:23.217 回答