DIV+CSS将文字写在图片上方
2020年02月16日 4596

代码

做xiuno主题可以运用上,和我的文章页页头相似,但又不一样的方式。这个可以利用PHP调用随机图片和文章图片,现在还没想这样设计,记录一下方法。

 

HTM

<div class="img-group">  
<img src="img/snow.png">
<div class="img-tip">图片上方的文字</div></div>

CSS

img-group {  position: relative;  display: inline-block;
}        
.img-tip {  position: absolute;  bottom: 0;  background: #333;  color: #fff;  opacity: 0.6;  display: none;
}        
.img-group:hover .img-tip {  display: block;  width: 100%;  text-align: center;
}

图片可以加入CSS样式。


- End -




0 条评论
  • 表情
  • 游客你好,回复内容需要 登录 查看!