HTML背景图片和背景色_动力节点Java学院整理

网页制作 2024/12/23 佚名

3 2 1

一、HTML图像<img>

1.<img>标签和它的src属性

在 HTML 中，图像由 <img> 标签定义。<img> 是一个空标签，意思是说，它只包含属性，并且没有闭合标签（而是直接以“/>”结尾）。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。定义图像的语法是：<img src="url" />，URL 指存储图像的位置。浏览器将图像显示在文档中图像标签出现的地方

<!--只指定了src属性的img-->
<img src="images/bjpowernode.jpg" />

2.<img>标签的其它属性

alt 属性：用来为图像定义一串预备的可替换的文本，当图片无法显示时，就会显示alt属性所定义的文本，在图片正常显示时，鼠标放上去也会有悬浮提示，比如“点击查看大图”。为页面上的图像都加上替换文本属性（alt）是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。而且，现在XHTML1.0标准已经强制使用alt属性。在<img>标签没有alt属性时，在VS中会有如下提示。

title属性：用来显示当鼠标放到图片上时显示的文字，是对图片的解释说明性文字。比如现在很多网站浏览图片时的“点击跳转到下一页”。

alt属性和title属性的区别：<img>标签的alt属性是在图片因浏览器兼容、加载失败或地址出错等原因而不显示时为浏览用户所做的代替语言，其性质为该图片的代替；而img标签的title属性，是表达该图片的一些额外信息，其性质为一种备注或者注释，鼠标过去时显示该段文字。

border属性：指定边框，border="0"不显示边框。

width（宽度）和height（高度）属性：指定图片的显示大小，如果不指定则是图片的原始大小。最好指定width、height，哪怕是原始尺寸大小，因为如果不指定大小，图片会不占页面位置，图片下载后才调整大小，会造成页面布局很乱。如果指定了width、height哪怕图片没有加载完成，也会先把位置占上。

<img src="images/1499417200939140562.jpg" />
 <!--指定alt属性的图片-->
<img src="images/1499417200939140562.jpg" alt="一幅漂亮的图片" />
<!--指定title属性的图片-->
<img src="images/1499417200939140562.jpg" alt="一幅漂亮的图片" title="哈哈" />
 <!--设置宽度和高度的图片-->
<img src="images/xxxx.gif" title="img" alt="img" width="454" height="340" />

3.<img>作为超链接

<img>作为超链接（即图像超链接），就是将<img>标签作为<a></a>标签的链接对象。注意：在<img>作为超链接对象时，IE浏览器会自动为<img>加上一条蓝色的边框（border="1")，这在很多时候都不是我们想要的，可以通过设置border="0"来取消边框。

<!--图片超链接，将img标签作为超链接的对象即可-->
<a href="../HTML超链接.html" title="HTML超链接语法">
<img src="http://www.bjpowernode.com/image/m.jpg" border="0" alt="图片链接" />
</a>

二、HTML背景

1.背景颜色（Bgcolor）

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

<body bgcolor="#000000">  <!--十六进制颜色值-->
<body bgcolor="rgb(0,0,0)">  <!--rgb颜色值-->
<body bgcolor="black">  <!--颜色名称-->

2.背景（Background）

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。注意：为了加快网页的显示速度，提高网站的友好性，背景图像大小不应该超过10k.

<body background="clouds.gif"> <!--相对URL-->
<body background="http://www.bjpowernode.com /clouds.gif">  <!--绝对URL-->

附注：在新的标准当中，HTML元素的背景颜色（bgcolor）和背景图像（background）属性已经被废弃，而是用css设置元素的背景颜色和背景图片。

三、颜色（Color）

1.颜色

颜色（Color）由红色（Red）、绿色（Green）、蓝色（Blue）混合而成。颜色值：颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。如黑色的颜色名为black,十六进制表示为#000000,rgb值为rgb（0,0,0）。

2.颜色名

仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua（浅绿色）, black（黑色）, blue（蓝色）, fuchsia（紫红色）, gray（灰色）, green（绿色）, lime（绿黄色）, maroon（褐红色）, navy（深蓝色）, olive（橄榄色）, purple（紫色）, red（红色）, silver（银色）, teal（青色）, white（白色）, yellow（黄色）。如果需要使用其它的颜色，需要使用十六进制的颜色值。

3.Web安全色

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。 4.216 跨平台色

最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

HTML背景图片,HTML背景色,HTML背景