大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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.
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/167356.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...