使用背景图像、标题和类别添加指向 div 的链接

Question

我们的特色图片作为 div 背景，我们无法链接它

当我们尝试使用 href 作为绝对值时，一定有问题！！

我们需要链接 div 和它的标题，但保留 category 和 cmets url

urls 不受 div 上的 post url 影响

你可以在这里看到实时代码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>

Answer 1

为什么不将带背景的 Div 更改为 span，然后用锚点包裹它。让主包装器相对，因此帖子元（类别链接，cmets 链接）将是绝对的，然后只需增加 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 -->

Answer 2

只需在“thumb-title”之前添加新的“a”并使其绝对。 这是更新的版本jsfiddle

添加了 HTML：

<a href="http://google.com" class='imageLink'>Click Image</a>

在 CSS 中

.imageLink{
        position: absolute;
        top:0;
        right: 0;
        bottom: 0;
        left: 0; 
}