在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:指定图像相对于它的容器最初应该置于何处。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 4,863评论 0 0
  • day01­_起源和结构 结构:Xhtml xml 表现:CSS 行为:DOM ECMAScript 以上都属于W...
    Sakura_明妃阅读 4,990评论 0 1
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 6,953评论 0 7
  • 基本常识与实践 css的每一个语句包括一个场所,以及这个场所的一个属性,还要应用到这个属性一个样式,一个典型的cs...
    丁俊杰_阅读 4,664评论 0 0
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 4,736评论 0 1

友情链接更多精彩内容