html如何将字隐藏在图片里,CSS实现让文字半透明显示在图片上的方法

本文实例讲述了CSS实现让文字半透明显示在图片上的方法。分享给大家供大家参考。具体实现方法如下：

复制代码代码如下:

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

文字显示在图片上

*{

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:500px;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

}

标题层叠在图片上，标题文字和背景半透明。鼠标经过边框换色。

脚本之家：https://www.jb51.net/

希望本文所述对大家的web网页设计有所帮助。