链接添加到分度,背景图片,标题和
问题描述:
类别
我们的特色形象的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>
答
为什么不将背景变化为跨度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 -->
它的作品就像一个魅力,谢谢。 – meno