<!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> <title></title> <style type="text/css"> .Divspan { background: none repeat scroll 0 0 rgba(22,123,235,0.5); color: #FFFFFF; cursor: pointer; display: block; height: 20px; line-height: 20px; margin-top: -20px; position: relative; text-align: center; z-index: 3; filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F167BEB,endcolorstr=#7F167BEB); } </style> </head> <body> <div style=" float:left;"> <img src="img/w_dongmanyouxi.jpg" alt="韩庚"/> <span class="Divspan" style=" position:relative;">韩庚韩庚韩庚韩庚韩庚</span> </div> </body> </html>
重点：将元素设置成透明，其子元素不会透明CSS
background: none repeat scroll 0 0 rgba(22,123,235,0.5);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F167BEB,endcolorstr=#7F167BEB);