在Web站点中使用图像

在Web页面上放置图像

要开始在Web站点上放置图像，首先要把图像文件移到与HTML文件相同的文件夹中，或者移到名为images的目录中，通常使用它以便于组织站点内容。
如果图像文件位于文档根目录下的images目录中，则将使用以下代码，可以看到它现在包含images目录中的你的图片文件的完整路径：

![](/images/图片名称)

src指“source”（源），或者指向图像文件的位置的引用。
与用于超链接的<a>标签一样，可以在<img />标签的src属性中指定任何完整的Internet地址，作为图像文件的位置。

利用文本描述图像

上面的那行代码中alt="My Image"。alt代表替代文本，如果图像没有加载，就会显示该消息，用以代替图像。每种Web浏览器都以不同的方式呈现alt文本。
甚至当图形已经完全加载并且在Web浏览器中可见时，无论何时鼠标指针经过图像，alt消息都可能会出现在一个小方框中（称为工具提示[ToolTip]）。alt消息也可以帮助任何具有视觉障碍（或者使用基于语音的界面阅读Web页面）的用户。
如果你绝对不需要alt属性，我建议给它分配一个空文本消息（alt=""），对于较小的或者装饰性的图像，有时就是这样。

指定图像的高度和宽度

![](图片名称)
100和200可变

对齐图像

1.水平图像对齐

像文本一样，图像通常对齐到左边，除非另一种对其设置只是他们应该居中或者对齐到右边。left是CSS text-align属性的默认值。也可以直接在<img />标签内使用CSS float属性，使文本环绕在图像周围。

2.垂直图像对齐

要把一幅图像的顶部与同一行上最高的图像或字母的顶部对齐，可以使用<img style="vertical-align:text-top" />
要把图像的底部与文本的底部对齐，可以使用<img style="vertical-align:text-bottom" />
要把图像的中间与行上的所有内容的总体垂直中心对齐，可以使用<img style="vertical-align:text-middle" />
要把图像的底部与文本的基线对齐，可以使用<img style="vertical-align:baseline" />

注意：CSS vertical-align属性还支持top和bottom值，无论行上具有任何文本，它们都可以使图像与元素所在行的总体顶部或底部对齐。

把图像转变成链接

使用缩略图作为有效的图像链接，链接到图像的较大版本。用到<a>标签和<div>标签

使用背景图像

协作用于创建背景的基本CSS属性如下
background-color:指定元素的背景色。如果图像是透明的或者没有加载，作为替代，用户将会看到背景色。
background-image:使用一下语法指定将图像用作元素的背景：url('imagename.gif')。
background-repeat:指定图像应该怎样在水平方向上和垂直方向上重复。默认情况下，背景图像将同时在水平方向和垂直方向上重复。其他选项包括：repeat（与默认值相同），repeat-x（水平），repeat-y（垂直），no-repeat（图形只出现一次）。
background-position:指定图像相对于它的容器最初应该置于何处。