css图片上面加文字透明,CSS实现文字半透明显示在图片上方法
生活随笔
收集整理的這篇文章主要介紹了
css图片上面加文字透明,CSS实现文字半透明显示在图片上方法
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文字顯示在圖片上
*{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;}
標(biāo)題層疊在圖片上，標(biāo)題文字和背景半透明但是不顯示。鼠標(biāo)經(jīng)過(guò)邊框換色并且顯示標(biāo)題。
總結(jié)
以上是生活随笔為你收集整理的css图片上面加文字透明,CSS实现文字半透明显示在图片上方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 前端学习（1960）vue之电商管理系统
- 下一篇： css模糊遮罩效果_CSS 半透明遮罩层