CSS實現文字半透明顯示在圖片上方法
在css中文字半透明我們會需要使用濾鏡效果也就是css中的filter:alpha來實現了，下面來看兩個文字顯示在圖片上並且半透明的例子。
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> |
大家可以根據自己的需要自己設置效果。
