11.11是公司成立的日子，16岁啦，我呢3岁半，感谢公司给了这样一个平台，让我得以学习和成长，这里祝愿公司发展越来越好~
进入主题，每年11月11号是光棍节，产生于校园，本来只是一流传于年轻人的娱乐性节日，以庆祝自己仍是单身一族为骄傲，而如今是各大商家以脱光为由打折促销的时期，成为了所谓的&购物节&，双11也算了，后面还要搞双12，不得不吐槽下。
于是呢，熬夜加班做了11.11的活动，在PC端遇到了透明背景和透明图片的问题，其实以前也遇到过，只是没有总结起来，就忘记了，这次又撞墙了，必须记录下来，一来给自己做个小总结，提个醒，最近变懒了，再不努力就要倒挂了；二来是因为在网络上并没有完整的解决方案，希望可以帮助到遇到此类问题的朋友，今天主要讲解背景透明的解决方案，共勉~
重点内容入口：
测试浏览器：
VirtIE6、虚拟机下XP的IE6、纯正IE8、纯正IE8下QQ浏览器、WIN7下的IE 9.0.32 、WIN8下的IE 10.0.21、chrome 38.0 、QQ浏览器8.0-IE10.0.5、safari 5.1.7、opera 25.0
如何实现背景透明，文字不透明，兼容所有浏览器？
我们平时所说的调整透明度，其实在样式中是调整不透明度，如下图所示例：
打开ps，在图层面板上，可以看到设置图层整理不透明度的菜单，从 0% （完全透明）到 100%（完全不透明）。
实现透明的css方法通常有以下3种方式，以下是不透明度都为80%的写法
css3的，x 的取值从 0 到 1，如opacity: 0.8
css3的，alpha的取值从 0 到 1，如rgba(255,255,255,0.8)
IE专属滤镜&filter:Alpha(opacity=x)，x 的取值从 0 到 100，如filter:Alpha(opacity=80)
css3的opacity
兼容性：IE6、7、8不支持，IE9及以上版本和标准浏览器都支持
使用说明：设置opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度
&!DOCTYPE html&
&meta charset="utf-8"&
&title&opacity&/title&
padding: 0;
margin: 0;
padding: 50px;
background: url(img/bg.png) 0 0 repeat;
padding: 25px;
background-color:#000000;
opacity: 0.2;
color: #FFFFFF;
&div class="demo"&
&p&背景透明，文字也透明&/p&
使用opacity后整个模块都透明了，展现如下：
那么使用opacity实现《背景透明，文字不透明》是不可取的。
css3的rgba
兼容性：IE6、7、8不支持，IE9及以上版本和标准浏览器都支持
使用说明：设置颜色的不透明度，一般用于调整background-color、color、box-shadow等的不透明度。
&!DOCTYPE html&
&meta charset="utf-8"&
&title&css3的rgba&/title&
padding: 0;
margin: 0;
padding: 50px;
background: url(img/bg.png) 0 0 repeat;
padding: 25px;
background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
background-color:rgba(0,0,0,0.2); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂，但解析为透明 */
color: #FFFFFF;
&div class="demo"&
&p&背景透明，文字也透明&/p&
在background-color中使用rgba，标准浏览器中，背景透明，文字不透明，展现如下：
很奇葩的是，IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂rgba，解析后颜色为透明，其实应该是null
那么使用opacity实现背景透明，文字不透明是可取的。
IE专属滤镜&filter:Alpha(opacity=x)
使用说明：IE浏览器专属，问题多多，本文以设置背景透明为例子，如下：
仅支持IE6、7、8、9，在IE10版本被废除
在IE6、7中，需要激活IE的haslayout属性(如：*zoom:1或者*overflow:hidden)，让它读懂filter:Alpha
在IE6、7、8中，设置了filter:Alpha的元素，父元素设置position:static(默认属性)，其子元素为相对定位，可让子元素不透明
&!DOCTYPE html&
&meta charset="utf-8"&
&title&opacity&/title&
padding: 0;
margin: 0;
padding: 50px;
background: url(img/bg.png) 0 0 repeat;
padding: 25px;
background: #000000;
filter:Alpha(opacity=50);/* 只支持IE6、7、8、9 */
position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
*zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
color: #FFFFFF;
position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值，保证字体颜色不透明 */
&div class="demo"&
&p&背景透明，文字不透明&/p&
全兼容的方案
上以上3点分析可知，设置透明背景文字不透明，可采用的属性有rgba和IE的专属滤镜filter:Alpha，其兼容性如下图所示：
针对IE6、7、8浏览器，我们可以采用fiter:Alpha，针对标准浏览器我们采用rgba，那么问题来了，IE9浏览器2个属性都支持，一起使用会重复降低不透明度...
那么，如何只对IE6、7、8使用fiter:Alpha如何实现呢？2年前写过《》一文，最新我也做了点更新，里面有IE的相关hack，找到只支持IE 6、7、8的方案，如下：
/* 只支持IE6、7、8 */
@media \0screen\,screen\9 {...}
ok，所有问题都解决了，全部代码如下：
&!DOCTYPE html&
&meta charset="utf-8"&
&title&背景透明，文字不透明&/title&
padding: 0;
margin: 0;
padding: 50px;
background: url(img/bg.png) 0 0 repeat;
padding: 25px;
background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
color: #FFFFFF;
@media \0screen\,screen\9 {/* 只支持IE6、7、8 */
background-color:#000000;
filter:Alpha(opacity=50);
position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
*zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */
&div class="demo"&
&p&背景透明，文字不透明&/p&
可能很多同学会觉得很复杂，为什么不直接用两个DIV放在同一个位置就行了，一个不透明DIV，一个文字DIV，很简单的解决问题，这也是好个方法，但是需要写绝对定位或负margin，并出现空内容的DIV，而且这是这种方法在有些场景下也会显得复杂，如下示例，鼠标经过商标后展现展现透明的提示文案，就需要控制2个DIV啦~
一点思路，如果疑问，欢迎大家留言交流~
阅读(...) 评论()
朋友同事同行在IE流览器中正确显示PNG透明图片
作者：佚名
字体：[ ] 来源：互联网 时间：10-17 19:28:21
　　png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如：在有颜色过度背景上插入不规则边框的图片带来极大很便利!
　　但目前IE中对于插入
　　png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如：在有颜色过度背景上插入不规则边框的图片带来极大很便利!
　　但目前IE中对于插入的透明背景的.png的图片是不能正常显示的。IE会自动给&.png&格式的图片加个灰色背景。
　　解决这个的方法是增加javascript。具体方法如下：
　　把下面的代码放在head区就可以解决问题了。
&scriptlanguage=&javascript&& functioncorrectPNG() { for(vari=0;i&document.images.i
) { varimg=document.images[i] varimgName=img.src.toUpperCase() if(imgName.substring(imgName.length-3,imgName.length)==&PNG&) { varimgID=(img.id)?&id='& img.id &'&:&& varimgClass=(img.className)?&class='& img.className &'&:&& varimgTitle=(img.title)?&title='& img.title &'&:&title='& img.alt &'& varimgStyle=&display:inline-& img.style.cssText if(img.align==&left&)imgStyle=&float:& imgStyle if(img.align==&right&)imgStyle=&float:& imgStyle if(img.parentElement.href)imgStyle=&cursor:& imgStyle varstrNewHTML=&&span& imgID imgClass imgTitle
&style=\&& &width:& img.width &height:& img.height && imgStyle &;&
&filter:progid:DXImageTransform.Microsoft.AlphaImageLoader&
&(src=\'& img.src &\',sizingMethod='scale');\&&&/span&& img.outerHTML=strNewHTML i=i-1 } } } window.attachEvent(&onload&,correctPNG); &/script&
　　也可以把这段代码单独加在一张图片上：
&span style=&filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='male.png',sizingMethod='scale');&&&/span&
大家感兴趣的内容
12345678910
最近更新的内容网页中png格式透明的N种方法
种方法:定义一个样式,给某个div应用这个样式后，div的透明png背景图片自动透明了。（注意两处图片的路径写法不一样，本例中，icon_home.png图片与html文件在相同目录）
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" ""&
&html xmlns=""&
&meta http-equiv="Content-Type" content="text/
charset=gb2312" /&
&title&无标题文档&/title&
&style type="text/css"&
height: 90
background-image: url(icon_home.png)!
background-repeat: no-
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png');
_ background-image:
class="qq"&&/div&
第 2 种方法:
给img定义样式，页面上所有透明png即自动透明了。（这方法只对直接插入的图片有效，对背景图无效）注意，要准备一个透明的小图片transparent.gif,大小不限。必须放在和html相同的目录
请勿大量使用，否则会导致页面打开很慢!!!)
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" ""&
&html xmlns=""&
&meta http-equiv="Content-Type" content="text/
charset=gb2312" /&
&title&无标题文档&/title&
&style type="text/css"&
.mypng img {
azimuth: expression_r(
this.pngSet?this.pngSet=true:(this.nodeName == "IMG"
this.src.toLowerCase().indexOf('.png')&-1?(this.runtimeStyle.backgroundImage
this.runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg?
this.origBg
:this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage =
"none")),this.pngSet=true);
换成你的png图片
&div class="mypng"&
&img src="icon_face_07.png" width="30" height="30"
&img src="icon_face_10.png" width="30" height="30"
&img src="icon_face_08.png" width="30" height="30"
种方法:用JS实现,加上一段js代码后,所有插入的透明png自动透明了.（注意，这方法也是只对直接插入的图片有效，对背景图无效）
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" ""&
&html xmlns=""&
&meta http-equiv="Content-Type" content="text/
charset=gb2312" /&
&title&无标题文档&/title&
&script language="JavaScript"&
function correctPNG() // correctly handle PNG transparency in Win
IE 5.5 & 6.
arVersion = navigator.appVersion.split("MSIE")
&&& var version
= parseFloat(arVersion[1])
&&& if ((version
&= 5.5) &&
(document.body.filters))
for(var j=0; j&document.images. j++)
var img = document.images[j]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) ==
&&&&&&&&&&&&
var imgID = (img.id) ? "id='" + img.id + "' " : ""
&&&&&&&&&&&&
var imgClass = (img.className) ? "class='" + img.className + "' " :
&&&&&&&&&&&&
var imgTitle = (img.title) ? "title='" + img.title + "' " :
"title='" + img.alt + "' "
&&&&&&&&&&&&
var imgStyle = "display:inline-" + img.style.cssText
&&&&&&&&&&&&
if (img.align == "left") imgStyle = "float:" + imgStyle
&&&&&&&&&&&&
if (img.align == "right") imgStyle = "float:" +
&&&&&&&&&&&&
if (img.parentElement.href) imgStyle = "cursor:" +
&&&&&&&&&&&&
var strNewHTML = "&span " + imgID + imgClass +
&&&&&&&&&&&&
+ " style=\"" + "width:" + img.width + " height:" + img.height +
"" + imgStyle + ";"
&&&&&&&&&&&&
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
&&&&&&&&&&&&
+ "(src=\'" + img.src + "\',
sizingMethod='scale');\"&&/span&"
&&&&&&&&&&&&
img.outerHTML = strNewHTML
&&&&&&&&&&&&
window.attachEvent("onload", correctPNG);
&style type="text/css"&
background-color: #9999CC;
&/style&&/head&
把图片换成你自己的图片
&img src="img/icon_face_03.png" width="30"
height="30" /&&!--把图片换成你自己的图片
&img src="img/icon_face_05.png" width="30"
height="30" /&
&img src="img/menu_title_over.png" width="130"
height="36" /&
&/html&&&&&
&script language="javascript"&
// 修复 IE 下 PNG 图片不能透明显示的问题
function fixPNG(myImage) {
var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
if ((version &= 5.5)
&& (version & 7)
&& (document.body.filters))
var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";
var imgClass = (myImage.className) ? "class='" + myImage.className
+ "' " : "";
var imgTitle = (myImage.title) ? "title='" +
myImage.title&& + "' " :
"title='" + myImage.alt + "' ";
var imgStyle = "display:inline-" +
myImage.style.cssT
var strNewHTML = "&span " + imgID + imgClass +
&& + " style=\"" + "width:" +
myImage.width
&& + " height:" +
myImage.height
&& + "" + imgStyle +
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
&& + "(src=\'" + myImage.src +
sizingMethod='scale');\"&&/span&";
myImage.outerHTML = strNewHTML;
window.onload=function(){
document.getElementByIdx("top").style.height=screen.height/5+"px";
用法如下：
&img src="logo.png" width="328" height="325"
border="0" onload="fixPNG(this)" /&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。让png格式图片在网页中透明显示_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
让png格式图片在网页中透明显示
上传于|0|0|文档简介
&&让png格式图片在网页中透明显示
你可能喜欢