文字顯示在圖片上

*{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;}

標題層疊在圖片上，標題文字和背景半透明但是不顯示。鼠標經過邊框換色并且顯示標題。

總結

以上是生活随笔為你收集整理的css图片上面加文字透明,CSS实现文字半透明显示在图片上方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。