我们的特色图片为div背景，我们无法将其链接
当我们尝试使用href作为绝对必须是错误的时候!!
我们需要链接div及其标题，但保留类别和评论网址及其
网址并且不受div上的帖子网址影响
您可以在此处查看实时代码http://codepen.io/earngate/pen/dvVLEj
#thumb-wrap {
margin: 0 auto;
overflow: hidden;
}
.thumb-element:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
right: 0;
bottom: 0;
left: 0;
background: -moz-linear-gradient(top, rgba(27, 26, 25, 0) 0%, rgba(27, 26, 25, 0) 46%, rgba(27, 26, 25, 0.44) 65%, rgba(27, 26, 25, 1) 99%, rgba(27, 26, 25, 1) 100%);
background: -o-linear-gradient(top, rgba(27, 26, 25, 0) 0%, rgba(27, 26, 25, 0) 46%, rgba(27, 26, 25, 0.44) 65%, rgba(27, 26, 25, 1) 99%, rgba(27, 26, 25, 1) 100%);
background: -ms-linear-gradient(top, rgba(27, 26, 25, 0) 0%, rgba(27, 26, 25, 0) 46%, rgba(27, 26, 25, 0.44) 65%, rgba(27, 26, 25, 1) 99%, rgba(27, 26, 25, 1) 100%);
background: -webkit-linear-gradient(top, rgba(27, 26, 25, 0) 0%, rgba(27, 26, 25, 0) 46%, rgba(27, 26, 25, 0.44) 65%, rgba(27, 26, 25, 1) 99%, rgba(27, 26, 25, 1) 100%);
background: linear-gradient(to bottom, rgba(27, 26, 25, 0) 0%, rgba(27, 26, 25, 0) 46%, rgba(27, 26, 25, 0.44) 65%, rgba(27, 26, 25, 1) 99%, rgba(27, 26, 25, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001b1a19', endColorstr='#1b1a19', GradientType=0);
}
.thumb-element:hover .thumb-title,
.thumb-element:hover .thumb-summary {
margin-bottom: 5px;
background: no-repeat 50% 70%;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.thumb-category {
position: absolute;
background: green;
border-radius: 30px;
padding: 1px 15px;
top: -30px;
right: 15px;
}
#thumb-wrap a {
opacity: 1.0;
color: #fff;
}
.relative {
position: relative
}
#thumb-first-container {
width: 50%;
float: right;
height: 390px !important;
}
#thumb-container {
float: right;
width: 20%;
height: 195px !important;
}
#thumb-container:nth-child(5n+2),
#thumb-container:nth-child(5n+5) {
width: 30%;
}
.thumb-title {
position: absolute;
bottom: 10px;
right: 10px;
direction: rtl
}
.thumb-link {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.thumb-dummy {
padding-top: 60%;
}
.thumb-element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
border: 1px solid white;
padding-top: 19px;
background: no-repeat 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.thumb-content {
width: 100%;
}
.thumb-next {
position: absolute;
top: 50%;
}
.thumb-prev {
position: absolute;
top: 50%;
}
h2 {
font-size: 10pt;
}<div id="thumb-wrap">
<div class="thumb-content">
<div id="thumb-first-container" class="relative">
<div class="thumb-dummy">
</div>
<div title="6 Animals that Went Viral Around the World" class="thumb-element" style="background-image: url('http://i.imgur.com/9GnXdDFl.jpg')">
<div class="thumb-title">
<div class="thumb-category">
<a href="http://animal-site.com/?cat=102363">News</a>
</div>
<a class="thumb-link" title="6 Animals that Went Viral Around the World" href="http://animal-site.com/?p=106588" rel="bookmark">
<h2>6 Animals that Went Viral Around the World </h2>
</a>
<div class="post-meta-info">
<span class="post-meta"><i class="fa fa-clock-o"></i>
<a rel="bookmark">2 weeks ago</a></span> <span class="post-meta">
<i class="fa fa-comments"></i>
<a href="http://animal-site.com/?p=106588#respond">0</a></span>
</div>
<p></p>
<div class="thumb-summary">
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
为什么不将背景中的Div更改为span，然后使用锚点将其包装。让主包装器相对，所以post meta（类别链接，注释链接）将是绝对的，然后只需增加z-index就可以将它放在最上面。
你可以尝试这个。我已经更改了代码，因为没有标签是不需要的。
#featured-image{
position: relative;
width: 50%;
float: right;
margin: 10px;
}
*{
margin: 0;
padding: 0;
}
#featured-image figure a{
display: block;
}
#featured-image figure span{
display: block;
height: 390px;
background: no-repeat 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url('http://i.imgur.com/9GnXdDFl.jpg');
}
#featured-image figure span:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
right: 0;
bottom: 0;
left: 0;
background: -moz-linear-gradient(top, rgba(27,26,25,0) 0%, rgba(27,26,25,0) 46%, rgba(27,26,25,0.44) 65%, rgba(27,26,25,1) 99%, rgba(27,26,25,1) 100%);
background: -o-linear-gradient(top, rgba(27,26,25,0) 0%, rgba(27,26,25,0) 46%, rgba(27,26,25,0.44) 65%, rgba(27,26,25,1) 99%, rgba(27,26,25,1) 100%);
background: -ms-linear-gradient(top, rgba(27,26,25,0) 0%, rgba(27,26,25,0) 46%, rgba(27,26,25,0.44) 65%, rgba(27,26,25,1) 99%, rgba(27,26,25,1) 100%);
background: -webkit-linear-gradient(top, rgba(27,26,25,0) 0%,rgba(27,26,25,0) 46%,rgba(27,26,25,0.44) 65%,rgba(27,26,25,1) 99%,rgba(27,26,25,1) 100%);
background: linear-gradient(to bottom, rgba(27,26,25,0) 0%,rgba(27,26,25,0) 46%,rgba(27,26,25,0.44) 65%,rgba(27,26,25,1) 99%,rgba(27,26,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001b1a19', endColorstr='#1b1a19',GradientType=0 );
}
#featured-image .info-wrap{
position: absolute;
bottom: 0;
right: 0;
width: 20%;
z-index: 1000;
}
.info-wrap {
text-align: right;
padding: 10px;
}
.info-wrap h2{
font-size: 12pt;
padding-bottom: 15px;
}
.info-wrap a{
color: #fff;
text-decoration: none;
}
.info-wrap .post-cat{
background: green;
border-radius: 30px;
padding: 1px 15px;
text-align: center;
display: inline-block;
margin-bottom: 10px;
}
.post-meta p a{
display: inline-block;
margin: 0 3px;
}
.post-meta p a:hover,
.info-wrap h2 a:hover{
color: green;
}<div id="featured-image">
<figure>
<a href="#imagelinkhere"><span title="6 Animals that Went Viral Around the World"></span></a>
</figure>
<div class="info-wrap">
<h2 class="entry-title">
<a href="#titlelinkhere">6 Animals that Went Viral Around the World</a>
</h2>
<div class="post-meta">
<div class="post-cat"><a href="#cat-link">News</a></div>
<p><a href="#comments-link">Comments</a><a href="#respond-link">Respond</a></p>
</div><!--// end .post-meta -->
</div><!--// end .info-wrap -->
</div><!--// end #featured-image -->
答案 1 :(得分：0)
只需添加新的＆＃34; a＆＃34;之前＆＃34;拇指标题＆＃34;并使其绝对。 这里更新了varsion jsfiddle
添加了HTML：
<a href="http://google.com" class='imageLink'>Click Image</a>
和CSS
.imageLink{
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
}