css鼠标点在文字上背景透明,CSS实现文字半透明显示在图片上方法(示例代码)

CSS实现文字半透明显示在图片上方法

在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了，下面来看两个文字显示在图片上并且半透明的例子。

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}