我的代码正在生成额外的 <a> 链接答案

【问题标题】：My code is producing extra <a> links我的代码正在生成额外的 <a> 链接
【发布时间】：2016-04-13 00:45:48
【问题描述】：

我不知道为什么，但我认为我的 CSS 中的某些东西正在创建我的 HTML 代码的副本。我对 CSS 很陌生，所以也许我遗漏了一些东西！

这是我的 HTML：

<section class="once">
<div class="third" id="third">
<a href="http://69.195.124.168/~onceweso/?page_id=8" class="post" style="background-image: url(http://media.mydogspace.com.s3.amazonaws.com/wp-content/uploads/2013/08/puppy-500x350.jpg);">
<div class="post-overlay">
<div class="post-header">
<h2 class="homepage-title">The List</h2>
</div>
</div></a>

<a href="http://69.195.124.168/~onceweso/?page_id=8" class="post" style="background-image: url(http://media.mydogspace.com.s3.amazonaws.com/wp-content/uploads/2013/08/puppy-500x350.jpg);">
<div class="post-overlay">
<div class="post-header">
<h2 class="homepage-title">The List</h2>
</div>
</div></a>

<a href="http://69.195.124.168/~onceweso/?page_id=8" class="post" style="background-image: url(http://media.mydogspace.com.s3.amazonaws.com/wp-content/uploads/2013/08/puppy-500x350.jpg);">
<div class="post-overlay">
<div class="post-header">
<h2 class="homepage-title">The List</h2>
</div>
</div></a>
</div>
</section>

这是我的 CSS：

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

section.once {
    width: 100%;
    position: relative;
    float: left;
    padding-bottom: 10px;
    z-index: 2;
 }

.third {
    margin-top: -3.95%;
}

.third .post {
    display: block;
    width: 30.7%;
    margin-top: 3.95%;
    padding: 10%;
    float: left;
    position: relative;
    background-size: cover;
    background-position: center;
}

.post-header {
    position: absolute;
    right: 30px;
    bottom: 30px;
    left: 30px;
    }

.homepage-title {
    font-size: 1.375em;
    line-height: 120%;
    font-weight: 700;
    text-transform: uppercase;
    color: #222;
    word-break: break-word;
    -ms-word-break: break-word;
}

.post-overlay {
    background: rgba(0,0,0,0.75);
    opacity: 0;
}

.post-header {
    bottom: 35px;
}

::selection {
    background: #444;
    color: #FFF;
}

这是带有示例图片的 URL：http://69.195.124.168/~onceweso/?page_id=544 （密码：一次）

最终我的目标是添加文本叠加层。

谢谢！

【问题讨论】：

标签： html css hover overlay

【解决方案1】：

您不能将<div> 放入<a>。

因为这是非法的，所以浏览器会先隐式关闭<a>标签。

【讨论】：

【解决方案2】：

您的代码包含围绕 div 的锚点，这是不正确的，因为您实际上无法锚定 div。

这篇文章应该有助于您实现添加文本叠加的目标：http://www.the-art-of-web.com/css/textoverimage/

【讨论】：