各种烦人图片的整理方法_凡人烦人

各种烦人图片的整理方法_凡人烦人各种烦人图片资料的整理整合,也帮助自己进行一下梳理,有新的内容页会随时更新,大家看着图片烦恼的也可以看下,希望对和我一样的菜鸟有帮助哈!当然对于高手来说,您的回复是我勃起的动力首先还是要喊下口号———

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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.

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/167356.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号