CSS让文字半透明显示在图片上的两种效果

2014年8月26日 MK CSS 4 阅读 5754次

CSS让一行文字显示在图片的底部，用来说明图片的内容，当作图片标题，标题文字和背景可以设置半透明，鼠标经过图片时边框换色。

代码预览

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字显示在图片上</title>
<style type="text/css">
*{border:none;text-decoration:none}
.wrap{margin:8px;position:relative}
.photo a{position:absolute;display:block;border:1px solid #555555;}
.photo a:hover{border:1px solid #FFFFFF;}
.photo span{width:633px;background:#000;display:block;position:absolute;bottom:0;left:0;color:#fff;filter:alpha(opacity=50);-moz-opacity:0.6;opacity:0.6;font:bold 12px/30px Verdana, Arial; text-align:center;cursor:hand;}
.photo a:hover span{text-decoration:underline}
</style>
</head>
<body>
<div class="wrap">
<div class="photo"><a href="#">
<img src="/wp-content/uploads/2014/08/bq.jpg" border="0" alt=""/><span>标题层叠在图片上，标题文字和背景半透明。鼠标经过边框换色。</span></a></div>
</div>
</body>

这个功能可以衍生出很多其他的版本，比如说鼠标滑动的时候才显示介绍文字啊。这个还是很常见的。看看下面的效果。

代码预览

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字显示在图片上</title>
<style type="text/css">
*{border:none;text-decoration:none}
.wrap{margin:8px;position:relative}
.photo a{position:absolute;display:block;border:1px solid #555555;}
.photo a:hover{border:1px solid #FFFFFF;}
.photo span{width:633px;background:#000;display:block;position:absolute;bottom:0;left:0;color:#fff;filter:alpha(opacity=50);-moz-opacity:0.6;opacity:0.6;font:bold 12px/30px Verdana, Arial; text-align:center;cursor:hand;display:none;}
.photo a:hover span{text-decoration:underline;display:block;}
</style>
</head>
<body>
<div class="wrap">
<div class="photo"><a href="#">
<img src="/wp-content/uploads/2014/08/bq.jpg" border="0" alt=""/><span>标题层叠在图片上，标题文字和背景半透明但是不显示。鼠标经过边框换色并且显示标题。</span></a></div>
</div>
</body>

大家可以根据自己的需要自己设置效果。

css, 图片, 透明

WordPress抓取第一张图片为缩略图的方法 WordPress缩略图thumbnail尺寸控制的方法

4 条评论 “CSS让文字半透明显示在图片上的两种效果”

爆破测振仪说道：

2014年9月24日上午9:46

博的CSS太厉害了！长见识了。谢谢

【爆破测振仪】

回复
红博客说道：

2014年9月4日上午11:27

没想到CSS也能做出这个效果，我本人不太研究这个，需要的时候就直接网上找相关的代码了，也谢谢博主的分享。

【红博客】-关注中小企业及创业

回复
- MK说道：
  
  2014年9月4日上午11:36
  
  CSS能做js的大部分效果的。
  
  回复
97蜜桃说道：

2014年8月31日下午7:54

好久没来了，过来看看支持下。

回复

一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

CSS让文字半透明显示在图片上的两种效果

代码预览

代码预览

相关文章

4 条评论 “CSS让文字半透明显示在图片上的两种效果”

发表回复取消回复

近期文章

最近读者

CSS让文字半透明显示在图片上的两种效果

代码预览

代码预览

相关文章

4 条评论 “CSS让文字半透明显示在图片上的两种效果”

发表回复 取消回复

近期文章

最近读者

发表回复取消回复