将图像链接到不指向的帖子URL

时间:2017-06-18 19:55:11

标签: html css wordpress image

我已将此代码插入到我的块中。

<div data-content="FOR GIRLS" class="image">
<img src="path_to_image" 
alt="" />
</div>
<p></p>

<div data-content="FOR BOYS" class="image">
<img src="path_to_image" 
alt="" />
</div>

尝试以这种方式将图片链接到帖子网址:

<div data-content="FOR GIRLS" class="image">
<a href="link_to_post"><img src="path_to_image" 
alt="" /></a>
</div>
<p></p>

<div data-content="FOR BOYS" class="image">
<a href="link_to_post"><img src="path_to_image" 
alt="" /></a>
</div>

但保存时更改图片仍然无法链接..

这是图像类的CSS:

.image img {
  width:100%;
  vertical-align:top;
  height:95%;
}
.image:after, .image:before {
position:absolute;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:after {
content:'\A';
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
}
.image:before {
content: attr(data-content);
width:100%;
color:#fff;
z-index:1;
bottom:0;
padding:0px 10px;
text-align:center;
background:black;
box-sizing:border-box;
-moz-box-sizing:border-box;
padding-bottom: 5px;
}
.image:hover:after, .image:hover:before {
opacity:1;
}

我不知道出了什么问题,为什么我不能以这种方式链接图像。一些提示?

1 个答案:

答案 0 :(得分:1)

尝试使用html:

Python 3

和css:

Python 3