一个分享个人学习、开发经验的Blog,http://www.joyphper.net

CSS实现的透明效果

posted @ 2011-02-12 10:09 | 阅读:2343 | 评论:1 | 分类: HTML

/* 值越大,越不透明*/

img {
    opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
    filter: alpha(opacity=75); /* IE lt 8 */
    -ms-filter: "alpha(opacity=75)"; /* IE 8 */
    -khtml-opacity: .75; /* Safari 1.x */
    -moz-opacity: .75; /* FF lt 1.5, Netscape */
}

应用例子

 

 

<!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> 
</head> 
<style> 
img {  
    opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */  
    filter: alpha(opacity=75); /* IE lt 8 */  
    -ms-filter: "alpha(opacity=25)"; /* IE 8 */  
    -khtml-opacity: .75; /* Safari 1.x */  
    -moz-opacity: .75; /* FF lt 1.5, Netscape */  
}  
</style> 
<body> 
<h1>透明的效果呀<br />其实我在图片后面</h1> 
<img src="22.jpg" width="355" height="215" style="position:absolute; left:0px; top:0px;"/> 
</body> 
</html> 

 

 

共有1条评论 发表评论>>

Lucy 发表于:2016-05-18 23:23
What a pleasure to find someone who idienifets the issues so clearly
点击换一张验证码