89.尚硅谷_HTML&CSS基础_ie6png的修复.avi原创

我们再说一个东西啊，说一个东西呢，我们来先，诶咱们把昨天咱们讲背景的时候，咱们找一个这个找一个图片出来就是它了啊CTRLC，咱们把这图片给粘过来，来我们来看一下这个图片的一个问题啊来那这里边我们来创建一个文件，我们来什么呢？来一个这个就叫一个零八，你叫一个这个图片，点一个M，你们在这儿呢，引入这么一个图片，我直接来一个什么呀，来一个这个，这样写吧，我直接来一个div，点一个叫做BOX1，然后呢，我这写一个这个style标签，那要标签我来什么呢？来一个这个点一个BOX1，我来一个200个像素，也来一个这个200个像素，然后background background一个image DA background一个image，我们来一个URL，来一个3.png，那现在我是不是将这个3.png作为我们这个box的一个。

好背景啊，然后再设置一个吧，Back壳图上的一个repeat，我们来一个no repeat不重复啊，CTRL运行，诶是不是这么一个效果呀，啊，是我们这么一个这个小猫啊，哎，那我们来看看什么呢？我们这块要说的是什么问题呢？诶今天说的不是火狐，然后说的是我们这个IE6。关掉啊，打开我们这个完了还卡着了，打开我们这个IE6，然后放到这里面，我们来看效果。我们这一发现这图片都没出来啊，为啥没出来呢？这个原因啊，不是说IE6的毛病，其实也算是他毛病，但是呢，因为什么呀，我们这一块用了一个什么呀，中文名啊，用一个中文名，这不仅是IE6，你上这个IE11里面也没有啊，也没有，所以注意你要看到我们这个中文名的一个问题，它有时候找这东西他找不准，你可以干嘛呢？你可以给他往里拖，这样就可以显示了啊，但是通过服务器访问是不行的啊，这个IA6也一样，直接给它往里往里拖是不是出来了，哎，出来了，但是出来是出来了，你没发现有个问题啊，你看我火狐，再看我阿一六，他这背景是有点发灰，有点发蓝这么一个背景是吧，而我们这个火狐，它应该是一个什么呀，是不是应该是一个透明的呀，诶透明的啊，这样你可能看的不是特别的清楚，我们给boy设置一个这个背景。

Background color来个井号BFA保存我们这一刷新，诶你看火狐狸就比较清楚，一个蓝色，一个绿色背景，然后这么一个小猫，对吧，但是来看我这个IE6里边一刷新发现什么了，这个背景它是透明的吗？哎，不是透明的啊，不是透明的，而这个问题呢，其实只有IE6有，包括我们这个IE11，包括我们这个I叶。IE8其实都什么呀，都没有这个问题，那这个问题只有IE6有，那为什么IE6会有这个问题呢？我们来看啊，先来把这图片粘过来，粘到我们桌面上，这图片是一个什么格式啊，叫做一个什么呀，PNG吧，哎，PNG，那这是我们IE6的一个小的问题啊，我们来这在这写一下，写什么问题呢？

在我们这个IE6中干嘛呢？哎，对我们这个叫什么呀？哎图片格式，诶图片格式我们这个PNG24支持的什么呀？支持度不高啊，支持度不高，诶如果什么呢？如果使用的这个图片格式是什么呢？是PG24啊是PG4则会什么呢？则会导致我们这个透明干嘛呢？无法，诶透明效果无法正常显示，比如说本来应该是一个透明的，它会给我们显示一个什么呀？诶发灰发蓝这么一颜色对吧？诶发灰发蓝这么一个颜色，哎不能正常去显示我们这个透明的效，那现在我们说了，那如果我们说我不兼容IA6这个东西我都不用管的，对吧？那我们说如果我需要兼容IA6，那怎么办呢？

换格，哎，我是不是可以换一个格式啊，哎，那我们想了，既然PNG24它不支持，我们还有一个格式叫什么呀，叫PNGPNG8，那PNG8和PNG24什么区别呢？简单理解一下PNG24大。清楚PNG8小清晰度没有PG24干嘛呀，高啊没有PG24高，但是呢，我们却可以去解决这个问题，为什么呢？哎解决方法可以什么呢？可以使用我们这个PND哎八来干嘛呢？哎来代替我们这个PNG24啊即可什么呀，即可去解决这个问题，来我们来看效果怎么去解决，找到我们图片，图片是不是跟这呢呀，3.png怎么改格式，右键打开方式我们就什么呀，Photoshop诶打开以后其实这个转格式也好转，直接不用改，什么都不用动，文件存储为web所用格式，诶现在是不是PGSPGS往上找一个什么呀，PNG8我一选中它，诶这个就是我们PNG8的那格式，你看PG24是一个什么呀。

8.6K对吧，哎，来看我们这个PG8属一什么呀，4.383是不是小了一半啊，哎，小了一半，所以清晰度呢，会有一定的什么呀损失，如果你仔细看的话，你看它这个边缘实际上有一点什么呀，哎，有点锯齿的是吧？哎点锯齿的我们先不管它清不清楚，我们先看它什么呀，能不能用啊，能不能用直接往这来存储，存储的桌面还叫3.pnb替换，然后呢，这图然就变了，改个名，我叫一个三，叫一个四吧，4.pnd，然后CTRLC粘过来，好这我就不用三了，用谁来用四，我们看效果啊，直接来到火狐狸，看火狐狸没问题吧，诶狐狸没问题，来看我们这IE6，你刷新走你。

是不是也OK啊，哎，也OK啊，所以so easy是吧？诶直接把图片变成PG8就OK了，但是我们这里边说了，它有点小问题，什么小问题呢？哎，但是使用我们这个PG8代替我们这个PG24以后，我们的什么呢？我们这个图片的一个清晰度会什么呀，会有所下降，哎会有所下降不明显，但是其实你要仔细看的话，如果是你眼睛比较尖的话，其实你眼睛都看出来了。看见了吗？边缘是不是一就是锯齿啊，就是透明那个边缘，它会有一些这种锯齿状啊，看起来不是特别的清晰，但是如果你这块用的是谁呢？我这来一个box啊，咱们来对比一下它的效果。二我这来一个这一我用3.pd啊，二我用四点P1刷新。

这两个差异是还挺明显的呀，哎，这个就干嘛呀，很顺滑是吧？呃，这个它会有什么呀？哎，这种锯齿状啊锯齿状，所以这里边我们说虽然大体上这个效果还是能接受的，对吧，但是我们希望的是什么呀，我们是不是希望效果越好它越好啊，诶效果越好就越好，那所以如果我们追求一个最佳的效果，实际上PNG8它并不是一个什么呀，并不是一个最佳选择啊，PG8并不是一个最佳选择，那要怎么办呢？那怎么办呢？诶，这是我们第一种方法啊，然后我们来说第二种方法啊，大家注意这是一种解决方案啊，第二种方法干嘛呢？哎，使用我们那个javascript来干嘛呢？来解决该问题啊，来解决该问题，那这Java script我们要怎么写呢？诶其实呢，我们都大部分东西我们都不用自己写，这个方案是干嘛的呀？已经有人给我们写好了，我们直接拿过来用就OK了，我们需要什么呢？需要向我们这个页面中干嘛呢？引入一个外部的一个什么呀？诶，Javascript的文件啊，需要向我们页面中引入一个外部的javascript文件，然后什么呢？然后再写一些什么呢？写一些这个简单的这个什么呀，GS代码来干嘛呢？诶，来处理该问题啊，来处理该问题，那我们先来看怎么处理啊，一步一步来，那首先第一个是他要干嘛呀，引入一个外部的javascript文件对吧，那javascript文件它的后缀后缀名叫什么呀？就叫GS啊，就叫。

来，我们来看他长啥模样，在我这个课件里边，我别没整过来呀。完了，我这忘拷了是吧，我继续啊，我们说了这里边我需要干嘛呀，引入一个外部的GS文件来处理该问题啊，这个GS文件呢，我已经给大家找好了是吧？诶在我这个课件里边，这个nott里边叫一个IE6PNG啊这么一个文件一打开呢，我们来看文件，这里边这两个就是什么呀？GS文件，你看扩展名都是什么呀？诶点GS啊点GS，但是注意了，这里边是有两个版本的，一个什么呀，一个是带min的，还有一个什么呀，不带min的，诶那我们来点开看一下什么区别，我们来看一下带min的后边一个大小大小什么呀，7KB，还有一个不带M的是什么呀，13KB，说白了带min的是不是小一点啊，不带M这干嘛呀，要大一点，那它们什么区别呢？来我们先看一眼啊，简单它用它我们这个note加打开发现什么呀，这里边全都是我们这个GS的什么呀，代码啊。

全都是我们这个减点，当然你不用看懂啊，你就知道它是减点行了啊，减代码就行了，诶还有一个呢，带命in这个什么呀，这个实际上是一个东西，只不过带命in这个代码是一个什么呀，是一个经过压缩的啊的，换句话说它是是比较小啊，诶比较小，我们来打开它看一下它是怎么压缩的啊，我们来看一眼这个代码压缩完了以后是要干嘛呢？它只有一行，你注意啊，我这是13行，它后边是没行号了，都是自动换行出来的啊，我把这个自动换行给它点了，你发现什么了，他这只有一行啊，诶这个命版本的，把我们这个什么呀，代码里的所有这种换行啊，空格啊，这种格式化的东西，没必要的东西都干嘛了，给你去掉了，把这代码干干嘛了，变成了一行，哎，你所以你看是不是就13行，但是注意这13行干嘛非常的非常的长啊，非常的长，所以注意这两个代码实质上是什么呀，一样的啊，实质上一样的，那为什么给我们提供两个代码，这两个代码我们来说一下使用的。

用的情况啊，这个代码什么时候用，这是在我们开发的时候用的，开发时候为什么用它，我们来说了，这里边它是不是有一定格式啊，有格式它干嘛呀，它就是可读的，开发的时候我们是有时候需要去阅读一下我们那个什么呀，源代码，所以开发的时候我们用什么呢？我们用这个不带命in的啊，不带命的，而这个带命的呢，我们说了这代码基本上干嘛呀，就没法读了，读不懂了，那这个时候用啊，这是在我们这个项目部署到了我们这什么呀，生产环境里边时候，说白了就是项目真实的什么呀，上线了，真实上线以后，我们说了，我这文件是不是越小越好，哎，越小越好，所以一个是用在这个生产环境里边的待命的，不带命的用在于什么呀，用在我们这个呀，开发环境里，那我们用哪个呀，反正都看不懂是吧？哎，都看不懂咱们就来什么呀，小的就完了啊，小的完了直接CTRLC把这个文件给它粘到我们项目里来，直接粘到我们这个GS文件夹，夹好这个文件。

不就进来了，进来了以后，那它有点像什么呀？是不是像一个外部的CSS文件呀？哎，我们要使用这个外部文件，我们是不是得先给它引入进来呀？哎，引入进来那CSS文件我们用的什么引入啊，哎，Link，那这个GS文件呢，有点不一样了，用的是什么呢？诶，Script的标签注意了，我在哪引入的啊，注意一定要在我的最后边引入，在哪呢？在我们这个body标签的这个最后干嘛呢？引入我们这个we部的一个GS文件啊，在最后引入，别你在上边引入也行，但是它有时候会出现一些问题，在这儿呢，基本上是保险的啊，一定要注意在我们body标签最后引入我们这个检测文件，来一个script的标签，这是一个标签啊，然后来看它这个值啊，我们来看它，我创建完这个标签，它里边有一个text，一个text javascript，这就像什么呀，我们stop标签里边那个。

4SS吧，诶作用一样，这个都是什么呀？默认值写不写都是它，所以这个东西你就不用管它了，它自动给你生成，你就写上，没有呢，你不写也行啊，不也行，然后呢，我们要引入外部文件，还需要有一个属性叫什么呢？叫做src啊，叫做SRCSRC，我们就知道干嘛啊，它是指向我们外部文件那个路径吧，我们要引入谁呀？是不是引入这个呀，所以直接它给你提示了，直接整过来就行了，GS下边的什么呀，这个min点一个GS，直接把这个文件引入到我们这个页面里边即可啊即可，好，这一块引入完了，但是注意引入完了是不是就完事了呀，没有呢，没有呢，引入完了我们还需要干嘛呢？我们还需要在创建一个新的死的还有CPD的标签，哎，在创建一个新的sscript的标签，并什么呢？诶，并且编写一些我们这什么。

诶，GS代码啊，创建一个新的来一个什么呢？Scir I pd，诶我们来创建完了，其实格式跟它是什么呀，一样的，只不过这里边你就不能再写什么了，不能再写src了，Src了，说白了他们的作用，这个相当于我那个什么呀，Link引入外部文件，这个相当于什么呀，Style在我内部是不是写自己的这个塞代码啊，哎，这两个作用跟我们这个style差不多啊差不多，好，那问题就来了，那这里边我们要写啥呀？诶写啥呀，诶直接其实你也不用管它写啥了，你也记不住，你也不知道啥意思是吧，直接我来写，你们来看就OK了，叫为什么呢？里边有一个诶这么一个类，叫一个一个DD这么一个PND这么一个，这个东西叫什么呢？可以先给你们说一下是吧，这叫一个对象啊，这叫一个对象对象，这个对象点一个有一个方法叫一个什么呢？叫做一个fixed啊fix什么意思呀？诶就修复是吧，诶修复修复什么呢？来那这个就是来个码。

呢，就是来修复我们这个IE6的PNG问题的，那我们现在来看我要修复的是谁，我这一刷新现在两个图片上边，诶这报这报错了是吧？先不管它啊，上边这是我这个PG24，下边这是我们这个PNG8，我们是要修复这个PNG24的问题啊，哎，那我们来看这个图片我是在哪用的，是不是在div里用的，哎，Div里用的，所以这里边注意要传什么，传的是一个这个选择器，我要修复谁的问题，是不是修复我们这个div的问题啊，所以这块我直接传一个选择器div表示什么呀？表示我要修复div的这个图片问题，写完了，我这一保存，咱们来看效果，然后一刷新走你完了，那就是fix没有的，这一刷新走你完了，那就是他的问题了是吧，那我可能没记错，应该就是fix再试一下啊，换一个页面，刚才都报错了是吧。

来，再给他拖过来走，你。Object单suppose pro or method不支持这个属性或方法，那这个东西这玩意儿记错了它怎么办？它不灵了是吧？点个yes看能不能执行，不能执行那我这还一后招是吧，实际上我为了怕忘了代码直接写这了是吧，来看写没写错啊，还真是fix是吧？还真是fix啊，所以这里边呢，我应该是没有那个什么呀，没有那个ED的啊，所以这里边来给它去掉，然后呢再重新运行一下啊，所以记性不好呢，你就勤记着点，诶还真是fix行了吧，诶很神奇是吧，刚才那堆刚才失败那段呢，你就当没看见是吧？诶迅速给他忘了就行了啊好，那现在我们发现我调了这么一行代码，是不是就修复好了我们这个问题啊，哎，那简单说一下，其实这些东西呢，都记住了，它是一个什么呀，固定的唯独可能变的是里边什么呀，选择气我写个div表示的是什么呀，我要修复div这个图片问题吧呀，诶修。

不div的图片问题，实际上里边传的就是我们这个CS的什么呀，选择器啊，传的是我们这个CS选择器，表示我要修复div的这个图片问题，好，那现在又有问题了，我来一什么呢？Img标签SSC，我来一个3.pnd来我们来看效果，一刷新走你。

他是不是又没用了呀，哎，没用了，为什么呀，我这只修复了div，我有没有修复MD呀，没有，所以你要想修复MG么？还逗号来个什么呀，MG是不是行了呀，哎逗号MG这回我们再刷新走，你是不是就行了呀，哎就行了啊，当然你可以来一个更绝得来什么呀，哎来个星号，星号是不是任意啊哎全都给你修复了，这个效果也是什么呀，也是一样的啊，也是一样的，当然为了一些这个性能问题呢，最好还是干嘛呀，还是别写型号，还是干嘛呀，一个一个给呀写出来啊，一个一个给他写出来啊是我们说这个啊，就是一个PNG的一个修复啊一个修复啊，那这段代码呢，其实你你都不用去记啊，都不用去记，唯独记住了这个选择器需要我们自己填，其他的格式都是什么呀？都是固定的，还有一个可能变的就是什么呀，就是路径啊，其他的都是这个固定的啊，条都固定的，然后呢，还有这个代码实际让我干嘛了，我已经给你去写好了啊，我已经给你写好了，就是这条代码啊，就这段script的标签里边引入一个什么呀，GS文件，然后在这呢，直接写这么一个这个fix去修复它就OK了啊是fix啊，不是fix的啊，当然你们也不用记错了是吧？诶然后注意这一块这个东西呢，暂时先。

别管它，你用的时候先把它忽略，待会我们讲这个hi的时候，我们再去说这个问题啊，再去说这个问题，好，那这里边是我们说图片的一个修复，我们来听一下。