Question

I'm not sure why, but I think something in my CSS is creating duplicates of my HTML code. I'm fairly new to CSS, so maybe I'm missing something!

Here is my 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>

And here is my 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;
}

This is the URL with sample images: http://69.195.124.168/~onceweso/?page_id=544 （密码：一次）

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

谢谢！

Answer 1

您无法将<div>放入<a>。

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

Answer 2

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

本文应有助于您添加文字叠加层的目标：http://www.the-art-of-web.com/css/textoverimage/

我的代码产生了额外的<a> links

2 个答案: