Question

我在普通的HTML网站上运行了一个背景图片。我在我的背景图片中添加了另一个网站的2个LOGOS。我如何创建一个透明的DIV和链接只有我的网站上的徽标部分更像是热点当我点击徽标它应该在一个新的选项卡中打开并显示网页???任何帮助将不胜感激！：）

这是Box的CSS，

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

Answer 1

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

我们在锚标记上使用绝对定位position: absolute;。为了使其工作，它的包含元素应使用相对定位position: relative;。然后我们将锚标签显示为阻止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;
}

链接透明DIV

1 个答案: