链接添加到分度，背景图片，标题和

Question

类别

我们的特色形象的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> 
 
\t <a rel="bookmark">2 weeks ago</a></span> <span class="post-meta"> 
 
\t <i class="fa fa-comments"></i> 
 
\t <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>

Answer 1

为什么不将背景变化为跨度t母鸡用锚来包裹它。有主包装相对，所以后元（分类链接，评论链接）将是绝对的，只是增加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; 
 
\t 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%); 
 
\t 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%); 
 
\t 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%); 
 
\t 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; 
 
\t border-radius: 30px; 
 
\t 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 -->

Answer 2

只需添加新的 “一” 之前 “拇指称号”，并使其绝对的。 这里更新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; 
}