使用背景图像、标题和类别添加指向 div 的链接
Posted
技术标签:
【中文标题】使用背景图像、标题和类别添加指向 div 的链接【英文标题】：Add links to div with Background Image, title and category 【发布时间】：2017-08-07 13:07:45 【问题描述】：我们的特色图片作为 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>【问题讨论】：
【参考方案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 -->【讨论】：
【参考方案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;
【讨论】：
我们试过了，但不需要图像上的任何其他文字来点击链接以上是关于使用背景图像、标题和类别添加指向 div 的链接的主要内容，如果未能解决你的问题，请参考以下文章