企业建网站的含义安在-ie6下png站标制作的图片透

--------

企业建网站的含义安在

-------

FF火狐访问器和IE7以上和谷歌的访问器都早已立即适用全透明的png(png-24)图了,下面这些方式关键是处理IE6下全透明PNG站标制作的照片有灰底的难题(大伙儿都了解大家用ie6的人还十分多,因此需要解决下,不可以随便舍弃你的网友哟)

方式一界定css款式:

style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/fl.png')"

英语的语法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled : 可选项。布尔运算值(Boolean)。设定或查找滤镜是不是激活。true | false true : 默认设置值。滤镜激活。
false : 滤镜被严禁。

sizingMethod : 可选项。标识符串(String)。设定或查找滤镜功效的目标的照片在目标器皿界限内的显示信息方法。 crop : 裁切照片以适解决象尺寸。
image : 默认设置值。增大或减小目标的尺寸界限以适应照片的尺寸。
scale : 放缩照片以适解决象的尺寸界限。

src : 必选项。标识符串(String)。应用肯定或相对性 url 详细地址特定情况图象。倘若忽视此主要参数,滤镜将不会功效。

特点:
Enabled : 可读写能力。布尔运算值(Boolean)。参考 enabled 特性。
sizingMethod : 可读写能力。标识符串(String)。参考 sizingMethod 特性。
src : 可读写能力。标识符串(String)。参考 src 特性。

表明:
在目标器皿界限内,在目标的情况和內容之间显示信息一张照片。并出示对此照片的裁切和更改尺寸的实际操作。假如加载的是PNG(Portable Network Graphics)文件格式,则0%⑽0%的全透明度也被出示。
PNG(Portable Network Graphics)文件格式的照片的全透明度何不碍你挑选文字。也就是说,你能够挑选显示信息在PNG(Portable Network Graphics)文件格式的照片彻底全透明地区后边的內容。

案例:处理IE6下png全透明无效的难题。

CSS款式:

.png{
_background: url(images/mymake/2012/6/.png) no-repeat !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="images/mymake/2012/6/.png");
background:none;
width:118px;height:133px;
}

.png div{position:relative;}

HTML编码:

div
div
CSS 情况PNG全透明 及 连接无效难题处理
/div
/div

/*
适配IE6.0、IE7.0、FF,
IE7.0和新版的FF实际上是能够不加filter滤镜立即全透明的。
*/

第 1 种方式:界定一个款式,给某个div运用这个款式后,div的全透明png情况照片全自动全透明了。(留意两处照片的相对路径写法不一样,本例中,icon_home.png照片与html文档在同样文件目录)

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title 无题目文本文档 /title
style type="text/css"
!--
.qq {
height: 90px;
width: 90px;
background-image: url(images/mymake/2012/6/.png)!important;/* FF IE7 */
background-repeat: no-repeat;

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/mymake/2012/6/.png'); /* IE6 */
_ background-image: none; /* IE6 */
}
--
/style
/head

body

div /div

/body
/html

第 2 种方式: 给img界定款式,网页页面上全部全透明png即全自动全透明了。(这方式只对立即插进的照片合理,对情况图失效)留意,要提前准备一个全透明的小照片transparent.gif,尺寸不限。务必放在和html同样的文件目录
请勿很多应用,不然会致使网页页面开启很慢!!!)

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title 无题目文本文档 /title
style type="text/css"
.mypng img {
azimuth: expression(
this.pngSet?this.pngSet=true:(this.nodeName == "IMG" this.src.toLowerCase().indexOf('.png') -1?(this.runtimeStyle.backgroundImage = "none",
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);
}

/style
/head

body
换成你的png照片
div
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" /
/div
/body
/html

 

第 3 种方式:用JS完成,加上一段js编码后,全部插进的全透明png全自动全透明了.(留意,这方式也是只对立即插进的照片合理,对情况图失效)

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title 朝暮网 /title
script language="JavaScript"
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 6.
{
  var arVersion = navigator.appVersion.split("MSIE")
  var version = parseFloat(arVersion[1])
  if ((version = 5.5) (document.body.filters))
  {
  for(var j=0; j document.images.length; j++)
  {
  var img = document.images[j]
  var imgName = img.src.toUpperCase()
  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
  {
  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-block;" + img.style.cssText
  if (img.align == "left") imgStyle = "float:left;" + imgStyle
  if (img.align == "right") imgStyle = "float:right;" + imgStyle
  if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
  var strNewHTML = " span " + imgID + imgClass + imgTitle
  + " "" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
  + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
  + "(src=\'" + img.src + "\', sizingMethod='scale');\" /span "
  img.outerHTML = strNewHTML
  j = j-1
  }
  }
  } 
}
window.attachEvent("onload", correctPNG);
/script
style type="text/css"
!--
body {
background-color: #9999CC;
}
--
/style /head

body
把照片换成你自身的照片
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" /
/body
/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-block;" + myImage.style.cssText;
  var strNewHTML = " span " + imgID + imgClass + imgTitle

  + " "" + "width:" + myImage.width

  + "px; height:" + myImage.height

  + "px;" + imgStyle + ";"

  + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

  + "(src=\'" + myImage.src + "\', sizingMethod='scale');\" /span
  myImage.outerHTML = strNewHTML;
} }

window.onload=function(){
  document.getElementById("top").style.height=screen.height/5+"px";
 
}//
/script


用法以下:
img src="images/mymake/2012/6/.png" border="0" onload="fixPNG(this)" /



Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /alidata/www/ on line 181
Warning: mysql_free_result(): supplied argument is not a valid MySQL result resource in /alidata/www/ on line 187
---------

企业建网站的含义安在

------------

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://zyzzxc.cn/ziyuan/4065.html