大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

各种烦人图片资料的整理整合，也帮助自己进行一下梳理，有新的内容页会随时更新，大家看着图片烦恼的也可以看下，希望对和我一样的菜鸟有帮助哈！

当然对于高手来说，您的回复是我勃起的动力

首先还是要喊下口号————前端什么的简单爆了

1PNG图片

1.1PNG图片的定义

PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式 网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可 存储多到16位的α通道数据。

1.2我们常用的PNG8与PNG24的区别

PNG文件格式分为PNG-24和PNG-8，其最大的区别不是颜色位的区别，而是存储方式不同;

PNG-8 色盘索引、调色板中一位透明值、不支持阿尔法通道的半透明，存储格式中每个像素无透明度的数据块定义;PNG-8是用8位索引值来在调色盘中索引一个颜 色，因为一个索引值的最大上限为2的8次方既128，故调色盘中颜色数最多为128种，所以该文件格式又被叫做PNG-8128仿色。

PNG-24 无调色板、支持阿尔法通道的半透明、每个点阵都有透明度的定义，最低32位真彩色;是PNG-24是用24位来保存一个像素值，是真彩色。

PNG-8 和 gif 有一些相似之处，模式都是索引颜色，只支持像素级的纯透明，不支持 alpha 透明。我们通常说的“IE6 不支持 PNG 透明”，是指不支持 PNG-24 的透明（将透明区域显示为灰色）。但是 IE6 支持 PNG-8 的透明，就像支持 gif 的透明一样。

简单爆了的定义：以上所说都可以不看，总之1、PNG8支持全透明，并且各个浏览器都非常支持它，PNG8的半透明在IE6下会显示成全透明（这是PNG8优于GIF的其中 一点，半透明显示成全透明对用户的影响并不大）。2、PNG24支持半透明，IE6看他不爽，不支持他。所以就会衍生出了各种各样的解决办法。

 那么介绍下网寻找的3种PNG图片透明的解决办法

NO.1我最喜欢的方案——DD_belated

支持background-repeat，支持background-position,支持<img>。支持IE1,2,3,4,5,6,7,8,9,10，支持到你有高潮

看Demo: http://www.ediyang.com/demo/DD_Png/

使用方法：

1.在这里下载DD_belatedPNG.js文件.
http://dillerdesign.com/experiment/DD_belatedPNG/#download

2.在网页中引用,如下:

<!--[if IE 6]>
<script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script>
<script type="text/javascript">     /* EXAMPLE */   DD_belatedPNG.fix('.png_bg');   /* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/   </script> <![endif]-->   

3.如果你要使用a:hover就要注意你使用的选择器

<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js" ></script>
<script type="text/javascript">   DD_belatedPNG.fix('.trans,.box a:hover');   </script>
<![endif]-->   

 简单爆了的定义：喜欢吗？您的回复就是我勃起的动力。

NO.2Microsoft 的专有滤镜

当把PNG半透明图片作为背景使用时可以使用专用滤镜

.class{
　　　　　width:100%; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src="images/bg.png"); background:none;
}

但要解决背景上浮文字链接时还需要再次处理：

　　#menu{filter:progid:dximagetransform.microsoft.alphaimageloader(src='index.files/menu_bg.png', sizingmethod='scale');}
　　　　<div id="menu">
　　　　　　<div id="menu_link" style="position: relative;"><a href="#">链接</a></div>
　　　　</div>

NO.3让块透明

.div { FILTER: alpha(opacity=20); moz-opacity: 0.2; opacity: 0.2;} 

测试IE6,IE7,IE8,FF2,FF3均通过。提示：IE6,IE7需设置一个宽度(100%也行)，否则看不到效果。

简单爆了的定义：非常不好的方法，可以不看，恩，没看错，就当只做了解吧

 2JPEG图片

2.1JPEG图片的特点

1、支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。

2、有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。

3、JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。

简单爆了的定义：比PNG更适合用来对付像照片等各种颜色比较复杂层次较多的图片

3GIF图片

3.1GIF图片的特点

他支持全透明，也支持全不透明，但他真的不支持半透明的。非常重要的是:他是今天介绍的格式里唯一支持动画效果的。

简单爆了的定义：除了你需要支持动画，或者图片非常非常小以外，你都应该选择PNG8.