深入浅出HTML-第5章：使用图像

使用图像

作为大多数网站的一个重要组成部分，图像可以让网站看上去趣味盎然并给人留下深刻印象。设计方案中的图形元素能够构成网站品牌和视觉性标识的基础，使网站鹤立于万维网上不计其数的名种网站之中。

图像有装饰的作用，也有交流的功能。图像也属于内容而且有些概念更适合于用这种形象化的方式来传达。照片、插图、微标、图标、地图、图表和曲线图能用单靠文本可能无法办到的方式把你的想法解释清楚。尽管如此，要记住不是所看访问网站的人都能看见图像。

在 XHIML 文档中可以用img元素引用作为内容的图像，Web 浏览器会将其与文本一起呈现。但是目前浏览器对 object 元素的支持还不完善，而且缺乏一致性，所以使用img 元素仍然是首选的可靠方法。完全起装饰作用（而不传达信息）的图像应该用 CSS 附加到页面上，以便实现表现因素和内容的分离。

1、数字图像的工作原理
与存储在计算机的电子存储器中的其他东西一样，数字图像只不过是组织在一个虚拟文件中的一系列 1 和 0 组成的数据。计算机读取这批数字［每个数字称为一个位（bit），然后把它们成组成组地翻译为信号并传送到显示设备，在那里这些位会被转化为人眼可见的有色光（鲜红、深蓝、浅灰等）的小点。文件中还包含有经过编码的说明，描述了应该如何排列这些光点[ pixel(像素)，这是"picture elements（图像元素）” 的缩写］——就像瓷砖镶嵌画一样——组成一幅可识别的图像。

因为这些图像是按“ 位的图纸” 组装而成的，所以被称为位图化图像（ bitmapped image）。 在 Web上用来显示图像的就是位图。把每一个像素的颜色和位置信息累加起来是一个庞大的数据量。

用于 Web 的图像通常要经过压缩以降低文件的大小，以便即使是使用较慢的因特网连接，网页的下载时间也在可忍受的范围内。通过减少所存储的颜色或像素的数量，都可以大大降低文件的总体大小。如果你曾经通过慢速因特网连接下载过大文件，你就会知道那是一个何其折磨人的 过程。压缩图像的目标，是在不过多牺牲原始图片质量的前提下获得尽可能小的文件。

2、可用于 Web 的图像格式
用于 Web 的图像有 3 种压缩格式： JPEG、 GIF 和 PNG。其他格式的图像可能不能被浏览器呈现，所以你应该只使用 JPEG、 GIF 和 PNG 格式。几乎所有你可能会用来创建或编辑数字图像的程序都能用导出这些格式的文件。

①JPEG
JPEG（读作"jay-peg’’）代表联合图像专家组（Joint Photographic Experts Group）,是发明这种格式的组织的名称。这种压缩方案先对像素的平均颜色值进行采样，然后抛弃冗余像素，以此降低文件大小。以后在对图像进行解压和呈现时，会根据存储的样本重建那些被删除的像素。

因为 JPEG 压缩会损失一些信息，所以它被称为有损的（lossy） 压缩。解压后的 JPEG 图像不可能达到与原始图像一样的质量。 JPEG 实际上是一种图像质量损失可调节（variable-loss）的格 式，可以在不同的失真级别下进行压缩。压缩率越高意味着有更多像素被抛弃，而所得到的文件也就越小，但在图像质量上要付出代价。高压缩率的 JPEG 图像看上去有些模糊，并且带有一些 被称为 artifact 的斑驳的污迹，那就是像素被重建的地方。压缩程度越高的图像其文件越小，但质量也越差。

每次编辑和保存一张 JPEG 图像的时候，实际上是再次压缩一张已经被压缩过的图像， 在此过程中又会损失一些数据。

JPEG 格式通过牺牲像素来节省磁盘空间，但它能在相对较小的文件中存储大量颜色信息， 因此比较适合于照片和其他一些具有大量不同颜色的图像，以及一些存在一种颜色平滑地过渡到另一种颜色［称为连续色调（ continuous tone）］的情况的图像。JPEG 文件的文件扩展名是“.jpeg” 或".jpg",较短的一个更常见，因为有些计算机操作系统不允许使用 4 个（或更多）字符的文件扩展名。

②GIF
GIF 代表图形交流格式（ Graphic Interchange Format）。它通过减少文件中保存的颜色数目来压缩图像，但保留了每一个像素的位置信息。因为 GIF 被认为是一种无损格式，所以比较适合于徽标、图标，以及包含有文本、需要维持清晰的轮廓以便阅读的图像。一个 GIF 图像最多能包含 256 种不同颜色，也可以包含更少的颜色。保存的颜色数目越少，文件也就越小。曲线图、地图、素描和其他具有大面积纯色或颜色种类很少的图像，都适合使用 GIF 格式。

GIF 图像还可以包含透明区域，图像后面的东西能够透过这些区域显示出来。一个像素要么完全透明，要么完全不透明，因此在透明区域和不透明区域交界处会形成锯齿状边缘。大多数图像编辑程序都允许为透明 GIF 图像指定一种杂边色（matte color）,你可以将其设置为与页面背景色相同，以尽可能地减轻锯齿现象。

GIF的另一个显著特点是它支持初级的动画。一幅图像可以由许多帧组成，它们依次显示， 产生一些很酷的（也可能是很恼人的）效果。GIF动画中的每一帧都有额外的信息需要存储，所以自然会增加文件的大小。

GIF 文件使用扩展名“.gif”。

③PNG
可移植网络图形（ Portable Network Graphic,缩写为 PNG）这种格式是作为专利性的GIF 格式 的自由的后继者而被发明的。与 GIF 一样， PNG 图像最多也只能包含 256 种颜色（这称为 8 位色，因为每个像素用 8 位数据来描述颜色时最多只有 256 个不同值），它对透明的支持也与 GIF 一样。由于采用了一种不同的压缩方案， 8 位 PNG 文件有时 比 GIF 文件更小。

PNG 格式的另一个变体支持 24 位色，所以能包含上百万种不同颜色。在这方面，它与 JPEG相似，但其文件往往比 JPEG 格式的更大。可以说， 24 位 PNG 图像最出色的特点在于它包含了一 个透明度的 alpha 通道（ alpha channel），就像是在图像中嵌入的一个不可见层, 用于定义半透明区域。GIF 或 8位 PNG 中的透明像素是完全透明的，而 24位PNG 中的像素则可以是半透的，使某些部分的背景可以像透过半透明的膜一样透过图像显示出来。

许多较老的浏览器不完全支持具有 alpha 透明度的 PNG 图像，其中包括 Windows平台上的第 7 版之前的 IE。在这些老式浏览器过气之前，倘若你要使用 alpha 透明度的 PNG 图像，一定要谨慎从事。
PNG 文件使用扩展名 “.png”， 其发音是令人愉快的“ping”。

3、在内容中加入图像
网页上的文本内容是 XHTML 文档的一部分，它们被用来表明每一串词语的含义和用途的标签包围着。相比之下，图像是外部文件，实际上根本不是文档的一部分。在 XHTML 文档中使用 img 元素（或 object 元素，但 img 更常见，也更可靠）引用图像。呈现一个包含图像的网页分两个阶段：先是下载标记代码，然后再下载外部图像。只要 img 元素出现在文档里，浏览器就会从 Web 服务器获取它所引用的文件，并将其呈现在页面上以替代该元素。

①<img>
行内元素 img 被认为是一种替换元素（replaced element），因为被呈现的并不是元素本身。它也是没有任何文本内容的空元素，所以必须用一个结尾斜线 （ />） 自闭合。img 元素需要使用 src 属性声明图像文件的来源，其值是一个指向该文件在 Web 服务器上的位置的 URL （绝对的和相对的均可）。

alt 也是一个必需属性，它提供了与图像等价的替代性文本。如果无法获得图像，或者浏览器不能显示图像，那么将显示它所指定的替代性文本。还提高了网页对于有视力障碍的人的可访问性。下列代码显示了一个只包含src 和 alt 属性的 img 元素，这两个属性是保证 img 的有效性的最起码要求。

<img src="images∕pizza.jpg" alt="A pizza with sausage and olives" />

• 必需属性
  □ src： 指定一个 URL,它指向图形文件在 Web 服务器上的位置。
  □ alt： 提供与图像等价的替代性文本。
• 可选属性
  □ width： 指定图像的宽度，单位为像素。
  □ height： 指定图像的高度，单位为像素。
  □ ismap： 声明图像要被用于服务端图像映射。
  □ usemap： 用于确定所使用的客户端图像映射。
  □ longdesc： 指定指向包含对图像的详细说明的文档的 URL。
• 标准履性
  □ class
  □ dir
  □ id
  □ lang
  □ style
  □ title
  □ xml： lang
• alt 属性
  img 元素的所有实例都必须包含 alt 属性，以提供一个当无法看到图像时使用的文本替代物。 无法看到图像的原因可能是因为在URL 指向的位置找不到图像文件。添加一段简短的替代性文本说明，可以在图像不可见时表达图像的一些交流性意图。alt 属性最多可包含 1024 个字符（包括空格），但还是短一点好。如果图像特别复杂，需应该通过 longdesc 属性提供其说明信息。
  
  alt 属性的文本值在图像不可见时可以用作其替代物。如果你的页面中有一张睡在杂货袋里的猫的照片，那么 “ 袋中的猫” 、 “ 睡在褐色纸袋里的灰猫” 或者“ 睡在厨房桌上一只褐色杂货纸袋里的灰斑猫” 都是恰当的 alt 文本。对图片的这些描述都能布助读者想象出这幅图像，即使他们不能在屏幕上看到它。alt 属性的值会替代未找到的图像显示出来。
  
  alt 属性应该是图像的富有含义的替代品，有些图像是文字的图片形式，应该用相应的文字作为它们的 alt 属性。
  
  贴切的 alt 属性值，可以告知读者所缺失的图像是徽标、照片、插图、肖像、风景画、缩略图、特写、图表、地图等，但是不应该重复声明显而易见的事实。alt 属性是一种说明性的或功能性的图像替代品，因此它应该尽可能地对主题进行描述，而不仅仅描述图像本身。不要用图像文件名来作 alt 的值。
  
  title 属性在大多数图形化浏览器中都会显示为工具提示，在这里指定图像的与上下文相关的意图的描述更恰当，此时这个属性起着说明文字（ caption） 的作用，是名副其实的标题（ title）。如果同时指定了 alt 和 title，IE 将显示 title 文本而不是 alt 文本。
  
  没有 alt 属性的 img 元素，不仅是无效的 XHTML,而且缺乏可访问性。没有它提供的额外信息，屏幕阅读器或文本浏览器可能只会把图像表示为“.[IMAGE]”， 或者读（显示）出 src 属性指定的 URL。省略 alt 属性可能会导致一幅重要图像的呈现结果变得亳无意义。
  
  在把图像用作链接或提交表单的按钮时，富含信息的 alt 文本尤其重要。这种图像不仅仅包含信息，还具有某种功能。如果图像的内容是用作链接短语（ link phrase） 的文字，那么为了保证链接的可访问性，把 alt 属性设置为同一短语非常必要。
  所谓链接短语，是指一条超链接呈现出来的文本内容。比如链接“<a href="about.htm">关于我们</a>”中的链接短语就是“关于我们”。
  
  同一个网站在 Lynx （一种只显示文本的 Web 浏览器，对于省略 alt 属性的图像，它将显示其文件名）中的显示结果则是另一番景象。如果图像没有指定 alt 属性，网站的导航栏基本上毫无用处。
  
  起装饰作用的行内图像（指它们仅仅用于美化网页，不是富含信息的内容）也需要 alt 属性。 但不要将其用于说明它们的装饰性功能，只需将其设置为空字符串 （ alt="")即可，这会“ 隐藏” 这些无关紧要的图像。当图像不可用时，如果其 alt 设置为空字符串，那么图像就会像根本不存在一样。还有一个好处是，IE不会为具有空 alt 属性的图像显示工具提示。
• longdesc
  如果图像有一份较详细的说明，因为比较长，不宜用作 alt 属性的值，此时可为它另外创建 一个网页，并将图像的可选属性 longdesc 设置为这个包含详细说明的网页的 URL。有些图表和曲 线图显示的复杂数据如果以别的方式来表现的话需要用到表格，这种情况比较适合使用 longdesc 属性。下列代码展示了一个带有 longdesc 属性的img素。它所引用的图像是一个饼形图，很难在简短的 alt 属性中解释清楚。

<img src="/images/piechart.gif" alt="A pie chart showing the proportional  popularities of different pizza toppings" longdesc="/toppings.html"/>

• width 和 height
  图像按自然尺寸呈现在浏览器窗口中。但是因为图像是在标记代码和文本之后下载， 而在它被完全下载之前浏览器不可能知道它的尺寸，浏览器在知道了图像的尺寸之后将需要对文本进行重新编排以便为图像腾出足够的空间，如果访问者在此之前已经开始阅读文本的话，这种调整可能会令人不快。在 img 元素中指定 width 和 height 属性可以让浏览器为图像预留适当的空间， 并一次性地将文本呈现到位。
  
  如果 width 和 height 属性值与图像的自然尺寸不一致，那么浏览器将对图像进行缩放以使其符合这些属性值。但是通常应该避免这样改变图像的大小。当图像被 Web 浏览器放大显示时，看起来有点粗粒化（ blocky） ,显露出一个个的像素。当它被缩小显示时，虽然看起来依然清晰， 但文件的尺寸却比所需要的更大，其下载时间也比所需要的更多。理想情况下， width 和 height 属性值应该与图像的自然宽度和高度一致。
  还可以用 CSS 的 width 和 height 属性描述图像的大小. 如果用 CSS 定义已经设置了width 和 height属性的 img元素的样式，那么 CSS 中指定的大小将覆盖相应的 XHTML 属性值
• usemap 和 ismap
  如果一幅图像不是整个地包含在一个链接当中，而只是其中一些区域被指定为超链接，那么它就成为一个图像映射（ image map）。 图像的 usemap 属性用于确定呈现客户端图像映射时所使用的特定 map 元素。而其 ismap 属性则用于声明：图像将用于服务端图像映射（这是一种本质上不具有可访问性的技术，通常应该避免使用）。
• 已废弃的表现性属性
  img 元素有许多存在于 HTML 的早期版本中的可选属性，它们后来都被废弃，其效果改用 CSS 实现。这些属性在 XHTML 中都不再有效，但我们将它们列在这里，以便你能认识这些属性，并知道如何用现代的 CSS 实现其效果。
  
  □ align： 指定图像相对于毗邻文本的对齐方式。可用值包括 left、 right、 top、 nriddle、 bottom。在 CSS 中，左对齐和右对齐用 float 属性实现，而顶端对齐、垂直居中对齐和底端对齐用 vertical -align 属性实现。
  
  □ border： 为用作超链接的图像指定边框的宽度。它已经被 CSS 属性 border-width 所取代。
  
  □ hspace： 指定图像左、右两端的水平空间。已被 CSS 属性 margin-left 和 margin-right 取代。
  
  □ vspace： 指定图像上、下两端的垂直空间。已被 CSS 属性 margjn-top 和 margin-bottom 取代。
  
  在一些较早的文档中你可能还会遇到 img 元素中的 lowsrc 属性。这个属性指定了一个较小的文件，它会在整幅图像被下载之前下裁。但是，它是一种过时的、专有的属牲，只被 Netscape Navigator 的早期版本支持。不要再使用这个无效的属性。

②上下文中的图像
img 是行内元素，因此它会显示在同一行上的毗邻文本的旁边，其底端与文本基于同一条不可见的基线。

<p><img src="/images/pizza.jpg" width="18θ" height="110" alt="A close-up of one of our delicious pizzas"/>
We handcraft our pizzas on the spot using only the best ingredients, and then we bake them to perfection in our rustic wood-fired brick oven.</p>

它在图形化浏览器中的显示结果：行内图像的底端与文本基于同一基线。

如果图像、文本或者两者被分别包含在块级元素（如 div 或 p） 中，那么标准的块行为将发挥作用，浏览器会产生恰当的换行。但这一次 img 元素位于段落之外，包装在自己的 div 元素之中。

<div><img src="/images/pizza.jpg"  width="18θ" height="110" alt="A close-up of one of our delicious pizzas" /></div>

<p>We handcraft our pizzas on the spot using only the best ingredients, and then we bake them to perfection in our rustic wood-fired brick oven.</p>

图像（包含它的 div）和段落呈现在不同行上，div 和 p 都是块级元素，因此显示在各自的行上。
body 元素只能包含块级元素。而 img 是行内元素，所以它不能直接包含在 body 当中, 而是必须用一个块级容器加以包装，以保证 XHTML 文档的有效性。
两个或更多图像显示在一起时，其表现与别的行内元素一样。它们会像一组相邻的词那样一个挨一个地排在同一基线上。而且，与一串文字一样，如果一行的宽度不足以容纳相邻的一组图像，将会自动进行换行，把这些图像显示在几行上。

③让文字环绕图像
在 HTML 的早期版本中，使用一种现在已经废弃的 align属性实现这种效果，但是现在可以用 CSS 中的 float 属性做同样的事。

float 属性有 3 种值： left, right, none。当一个元素“ 浮动” 起来的时候，它会尽可能地向某一边（左边或右边）移动，直到（外）边缘碰到包含块的（内）边缘（或直到碰到另一个浮动元素）。
随后的文字或元素将绕开浮动元素向下流动。默认值 none 主要用于覆盖样式表中另一条规则给予元素的浮动属性。

在代码中，有一幅图像，后面跟着一段文字（二者都包含在同一个段落中）。其中，img 元素设置了 class 属性，以便对其应用 CSS 规则。

<p><img src="images/pizza.jpg" width="18θ" height="110"  class="figure" alt="A close-up of one of our delicious pizzas"/>
Spaghetti &#38; Cruft opened our doors in 1999, bringing great pizza and pasta to the heart of the city's trendy Riverbend district.We handcraft our pizzas on the spot using only the best ingredients, and then we bake them to perfection in our rustic wood-fired brick oven. We sell pizza by the slice or by the pie and even offer catering for any occasion all around the neighborhood.</p>

这个图像属于 figure 类。显示了针对这个类的 CSS 规则，它声明这类元素应该向左浮动：图像浮动到段落的左边，随后的文字绕过它向下流动。

.figure{
  float:left;
}

行内图像与毗邻文字基于同一基线。但是当图像浮动到某一边时，它的顶端将与其所在行的顶端平齐，而图像本身则向下延伸并越过基线。在前面的例子中，环绕的文字直接抵到了图像的边缘，不便于阅读。可以通过修改 CSS 规则为浮动的图像指定一点边距，以便在图像与文字之间创造一点空间。

.figure {
  float: left;
  margin-right: 1em;
  margin-bottom: .5em;
}

只有右边和下边需要边距，因为上边和左边不与文字接触。让上边和左边的边距保持默认值 0,使这两边与包含图像的段落的不可见的（内）边缘紧贴在一起。浮动图像现在有了一点喘息空间，边距扩大了图像的浮动的影响范围，现在文字环绕在图像的边距之外。

4、背景图像
使用 CSS 的 background-image 属性，可以向页面中加入装饰性的图像，而且不会把表现性的因素与内容混在一起。那些属于富有意义的内容的图像应该和其他内容放在一起。 XHTML 中几乎所有元素都能设置背景图像，元素的内容就覆盖在背景之上。默认情况下背景图像将在纵、横两个方向平铺：从元素左上角开始，在纵向和横向反复绘制，直到填满元素拥有的区域，这就像 厨房地板铺的瓷砖。
下例展示了一条为 body 元素设置背景图像的 CSS 规则。图像通过其 URL 指定， URL 包含在一对括号中，前面用关键字 url 标明：图形化浏览器呈现文档时，将用这个图像铺满其窗口。

body {
  background-image: url(/images/background∙gif);
}

可以用 background-repeat 属性改变默认的平铺方式，说明图像应该只在横向平铺、只在纵向平铺或者根本不进行平铺。下例声明背景图像应该沿 x 轴横向平铺：图像现在只横贯页面顶端进行重复绘制，并未向下重复绘制。

body {
  background-image: url(/images/background.gif);
  background-repeat: repeat-x;
}

repeat-y 值将使图像在纵向平铺，但不在横向平铺：

body {
  background-image: url(/images/background.gif); 
  background-repeat: repeat-y;
}

background-repeat 的默认值是 repeat,如果有必要，你可以用它覆盖别的规则中指定的其他值。也可以用 no-repeat 值完全禁止平铺：图像只出现了一次，在两个方向都没有进行平铺

body {
  background-image:url(∕images/background.gif);
  background-repeat: no-repeat;
}

如果背景图像比它所装饰的元素更大，那么元素的区域就像是一个用于界定背景中可见部分的窗口。背景图像比它所应用到的元素（本例中是一个 div） 大得多，所以背景图像的有些部分被隐藏了。

如果由于加入了更多内容、增大了文字的尺寸或者用 CSS 改变了元素的尺寸等原因，元素发生扩张，那么图像中将有更多的部分显露出来。

使用背景图像时要小心，不要让它们过多地妨碍内容的可阅读性。此外，还应该将背景色设置为一种与文字的前景色有鲜明对比的纯色(使用 CSS 的 backgroundcolor 属性) ，以防图像不能显示。在大多数现代浏览器的默认设置中，文字的颜色是黑色，其背景是白色。如果你的设计方案中使用了深色背景图像上的浅色文字，那么你还应该把背景色设置为一种深色。背景图像会盖住背景色，但是如果图像不能显示, 那么背景色将会显示出来。

5、定位背景图像
默认情况下，背景图像被放置在元素的左上角，CSS的background-position 属性控制着背景图像的位置。如果允许图像平铺，那么 background-position 的值表示平铺图案的起始位置。

这个属性接受两个值，一个用于横向位置，另一个用于纵向位置。横向值应该出现在纵向值之前，如果只指定一个值，它将被当做横向值。下面展示了用于将背景图像放置在 div 元素的右下角的 CSS 代码：图像被定位到元素的右下角，div 元素的高度与其内容的高度相同，所以它的底端没有抵到窗口底端。若非特意声明，元素的高度总是取决于其内容的高度。

div{
  background-image: url(∕images∕background.gif);
  background-repeat: no-repeat;
  background-position: right bottom;
}

background-position 的值可以指定为关键字、长度值和百分数。用于指定横向位置的关键字有left、center 和 right,用于指定纵向位置的有 top、center 和 bottom 。注意，关键字center 既可用于指定横向位置，也可用于指定纵向位置。用于纵向时，它代表元素高度的一半，用于横向时, 它代表元素宽度的一半。

长度值就是一个带有度量单位的数值，如 10px、20mm或3.5em,两个值不必使用同样的单位。长度为 0 时不需要使用单位。background-position 属性指定了两个长度值，将图像放置在距左端 40 像素、距顶端 3em 的位置。

body {
  background-image: url(∕images∕background.gif);
  background-repeat: no-repeat;
  background-position: 40p× 3em;
}

如果用百分数来定位背景图像，必须同时考虑图像以及它所装饰的元素的尺寸。将背景图像设置为距元素左边 75%,也会把参考点移到距图像的左边 75%的位置。在用 50%这个值定位背景图像时：背景图像的放置位置位于元素的中心。

对于基于度量单位的长度值来说则不是那么一回事。非百分数的长度值表示的总是从元素左上角到图像左上角的距离。

JPEG、GIF 和 PNG是3种用于压缩Web上使用的图像的流行文件格式。不同类型的图像应该选择不同的格式。色彩丰富的照片应该使用JPEG,具有纯色的文字和插图或者具有透明色的图像应该使用GIF或8位 PNG,具有alpha透明度的图像应该使用24位PNG。

本文地址：https://blog.csdn.net/CheryW/article/details/107359386

如对本文有疑问， 点击进行留言回复！！