网页中的位图与矢量图使用

1.位图和矢量图
   位图是由像素点组成的，文件较大，放大会失真，一般用来表示人物、风景等；矢量图是由线条组成的，文件较小，放大后不会失真，一般用来表示工程图等，是由若干个几何图形拼合而成。
2.分辨率
   又叫解析度、解像度。可分为显示分辨率、图像分辨率、打印分辨率和扫描分辨率等。
   图像分辨率就是单位英寸中所包含的像素点数。分辨率越高意味着图像越清晰，但这个图像文件也越大。
3.位分辨率
   又叫色彩深度或位深度，批一个像素中，每个颜色分量（Red,Green,Blue，Alpha通道）的比特数。
   位指的是二进制数或比特(bit)。

常见的位分辨率有：
       1位：2种颜色（黑白二色）
       2位：4种颜色
       3位：8种颜色，用于早期的电脑显示器
       ...
       8位：256种颜色，灰阶，有256种灰色（包括黑白）
       ...
       16位：可以组合出64k种颜色
       24位：1670多种颜色，真彩色，能提供比肉眼能识别更多的颜色，主要用于拍摄照片
       ...

位数越高，意味着颜色越接近生活中的真彩色，但文件也就越大。
4.网页所支持的图片格式
   1）.jpg
       24位压缩格式的图片，压缩率越大的图片，显示的内容越模糊，文件会越小。
   2）.png
       是一种无损压缩的位图图形格式，背景为透明效果，使彩色图像的边缘能与任何背景平滑地融合，从而彻底地消除锯齿边缘
   3）.gif
       分为GIF格式的动画和静态图像也是高压缩的图像文件。静态图像也是高压缩的图像文件。
   4）.svg
       HTML5新增的矢量图，一般用作图标字符。
   5）Base64（图像编码）
       设计时把图像文件解析成字符编码，浏览器会自动将其再还原为图像。实际上也是一种加密方法。
       很少使用这种用法，图像越大，编码量就越多，所以一般对大图不做base64编码处理。

base64图片编码网站：https://tool.oschina.net/encrypt?type=4
   6）.ico或.cur
       图标文件，一般用作网站的logo
5.svg矢量图使用步骤
   1）进入到官网https://icomoon.io/
   2）将svg图导入到icomoon网站中，选中，下载
   3）将fonts和style.css复制到项目中
   4）将style.css引入到网页文件中
   5）使用：
       用类名引入图标，并在图标名前加上icon-前缀。
           <span class="icon-favorite"></span>
   6）然后就可以像文字一样去设置其大小和颜色等属性

网页中的位图与矢量图使用相关推荐

游戏中的图像资源(位图与矢量图比较)
当今游戏早已不再是黑白机的时代,游戏都由色彩丰富.精致的图像,流畅的动画构成.Flash游戏也不例外,Flash既支持矢量图又支持位图,他们各有优缺点.本文的目的即是介绍何时使用矢量图,何时使用位图, ...
SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）
SVG实例详解系列(一) (svg概述.位图和矢量图区别(图解).SVG应用实例) 目录一.什么是SVG? (1).位图和矢量图概念(图解) (2).SVG的小例子 (a)笑脸符 (b).小鸟 (c ...
《JavaScript高效图形编程（修订版）》——6.2 位图、矢量图，或两者兼而有之？...
本节书摘来自异步社区<JavaScript高效图形编程(修订版)>一书中的第6章,第6.2节,作者:[美]Raffaele Cecco著,更多章节内容可以访问云栖社区"异步社区& ...
c#位图转换未矢量图_PS基础：像素与分辨率，位图与矢量图
一.像素与分辨率 1. 像素定义:图像中的最小颜色单位,是一个非常小的方形颜色块. 像素(Pixel)一般用px表示,每个像素只能有一个颜色. 将图像无限放大,会发现图像是由许多色彩相近的颜色方块组 ...
转载：位图和矢量图的区别
原文链接:位图和矢量图的区别位图和矢量图是计算机图形中的两大概念,这两种图形都被广泛应用到出版,印刷,互联网[如flash和svg]等各个方面,他们各有优缺点,两者各自的好处几乎是无法相互替代的,所 ...
Qt（mingw）+GDAL位图转矢量图写入shp或json文件
参考: Qt + GDAL 写入矢量图层 shp windows下的QT(mingw版)+GDAL库下载.安装.测试已经编译好的GDAL库下载: https://download.csdn.net/ ...
位图和矢量图谁的色彩更丰富_更少的更多色彩
位图和矢量图谁的色彩更丰富 It's simple to compute data and perform calculations directly in your stylesheet using ...
透彻理解位图与矢量图的本质区别(小包子觉得讲的很清晰)
其实每个人都能轻松而透彻地理解位图与矢量图的本质区别位图与矢量图的区别(为什么要再进行解释) 播放录像时按空格键暂停/继续播放 (关于位图与矢量图的区别,各种教材和网上解释的有很多,但是本 ...
android 笔记 --- 位图和矢量图区别
位图和矢量图是计算机图形中的两大概念,这两种图形都被广泛应用到出版,印刷,互联网[如flash和svg]等各个方面,他们各有优缺点,两者各自的好处几乎是无法相互替代的,所以,长久以来,矢量跟位图在应用 ...
2.13 将导入的位图转换为矢量图 [Illustrator CC教程]
原文:http://coolketang.com/staticDesign/5a979a5efe88c20038be87c8.html 1. 本节课将为您演示,如何将导入的位图,转换为矢量图.首先,依 ...

网页中的位图与矢量图使用

网页中的位图与矢量图使用相关推荐

最新文章

热门文章