注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

红尘若梦

生活的色彩

 
 
 

日志

 
 

通过CSS+DIV将文字或图片漂浮在图片上方  

2016-05-25 11:31:32|  分类: 技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
最近很多网站都有这种显示,在图片的上方显示一些购买链接,如下图所示。
通过CSS+DIV将文字或图片漂浮在图片上方 - 1976xyg - 红尘若梦
实现这个效果有两种办法,相应如下:
a)添加一个DIV,采用绝对定位,图片所属DIV为基准。相应代码如下:

<div style="position:relative;width:100px;height:100px;">
<img src="http://593668.com/skin/default/image/logo.gif" />
<div style="position:absolute;width:50px;height:50px;z-indent:2;top:10px;right: -21px;">
593668.com
</div>
</div>

b)把图片作为背景图片。相应代码如下:

<div style="width:200px;height:72px;background:url(http://593668.com/skin/default/image/logo.gif) no-repeat left top;">
<div style="height:50px;float:right;margin-right: 2px;">
593668.com
</div>
</div>

比较起来可能第一种方式会比较通用些,但看个人喜欢,利用好这种技巧,可以任意指定内容漂浮在图片的上方,这样相信可以让网页也显得更加高大上些。


 

  评论这张
 
阅读(34)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017