html - CSS:2张图片相互叠加,在两张图片上放置链接

标签 html css image hyperlink

我试图在两张图片上添加相同的链接,这是因为我有一个边框框,里面有一个主页按钮,两者都是图片,主页图片位于边框之上。

现在只有边框有链接,所以当我点击它时,你必须避开主页图标图像,因为它不会做任何事情,然后按下边框。

我想让两张图片转到同一个链接。这是代码:

#pageTop > #pageTopWrap > #select {
    background: url(../img/style/selection_bg.png) no-repeat bottom;
    width: 89px;
    height: 40px;
    position: absolute;
    bottom: -1px;
}
#pageTop > #pageTopWrap > #select:hover {
        background: url(../img/style/selection_bg_hover.png) no-repeat bottom;
}
#pageTop > #pageTopWrap > #home {
    background: url(../img/icons/home_icon.png) no-repeat;
    width: 32px;
    height: 26px;
    float:left;
    margin-top: 50px;
    margin-left: 27px;
    position:relative;
    bottom: 0px;
}

<div id="pageTop"> <a href="http://www.google.com/" title="base" id="logo"></a>
  <div id="pageTopWrap"> <a href="http://www.google.com/" title="Go to home" id="select"></a>
    <div id="home">
    </div>
  </div>
</div>

最佳答案

既然 2 个链接都指向同一个地方,为什么不用 1 个链接包裹所有内容

<div id="pageTop">
    <a href="http://www.google.com/" title="base" id="logo">
        <div id="pageTopWrap">
            <div id="home"></div>
      </div>
    </a>
</div>

关于html - CSS:2张图片相互叠加,在两张图片上放置链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21292109/

相关文章:

html - 使用 CSS 创建 Masonry 布局?

html - 图像框水平对齐

css - 如何强制 flex children 不溢出容器?

php - 如何在文件夹中按名称搜索图像?

html - Bootstrap 布局 - 将页脚和内容行粘贴到底部

html - 如何为 Youtube 嵌入式播放器创建自定义框架?

javascript - 带有渐变背景边框并使用js更改颜色的圆圈

javascript - swiper js 每个 View 多张幻灯片

c# - Java 中 C# 的 System.Drawing.Bitmap 的等价物是什么

image - 像素的强度和该像素的深度是否遵循特定关系?