<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字置于图片之上且背景半透明</title>
<style>
a.title {
color:#D3D3D4;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#A0000000‘, EndColorStr=‘#A0000000‘);
padding: 2px 4px;
position: absolute;
top: 0px; left:0;
width: auto;
text-decoration: none;
font: 32px Microsoft YaHei, Verdana;
color:#fff;
}
</style>
</head>
<body>
<div style=" position:relative; width:100%;">
<img src="pig.jpg"/>
<a class="title" href="#">猪警长O(∩_∩)O哈！……</a>
</div>
</body>
</html>
效果图:
将文字显示在图片上面，并使文字背景半透明,布布扣,bubuko.com
原文：http://blog.csdn.net/machunmei2/article/details/22377603
