背景基础知识
背景来自几个来源，但它们往往是颜色，照片，图形或插图。虽然不常见，但背景也可以动画。
虽然将大图像用作背景已经成为一种可接受的做法，但重要的是要记住，当您创建背景图像时，应该对其进行压缩以使其尽可能轻。这通常只需在图像编辑软件中使用“导出为Web”类型选项即可完成。
彩色背景
如果您只需要更改背景的颜色，而不是在那里放置图像，则可以通过CSS样式表控制图像。
在CSS中更改背景颜色
将此代码放在样式表中以更改页面的背景颜色。请记住使用背景颜色和具有足够对比度的文本颜色，以便文本始终易于阅读。
身体{
背景颜色：黄色;
}
或者，如果您愿意，可以使用十六进制代码。
body {
background-color：＃FFFF00;
}
如果需要覆盖特定页面的样式表，请使用内联样式编码。
在HTML中更改背景颜色
随着HTML5的引入，使用bgcolor属性从HTML标签内部更改颜色的选项不再是一个选项。这一变化反映了使用CSS控制所有HTML样式的动作。
在实施HTML5之前，您可以通过以下方式更改页面颜色：
虽然这种方法仍适用于旧版浏览器，但随着用户继续升级到更新的浏览器，代码最终将无法呈现。
Web安全色彩
在互联网的早期阶段，设计师坚持只使用网页安全颜色的做法，因为这些颜色在所有显示器上呈现相同。今天的许多显示器都可以渲染数百万种颜色，但它们并不都能均匀地呈现216色调的非网页安全颜色。因此，如果您担心这一点，如果您需要尽可能接近您设计的颜色并在浏览器和设备上平等渲染，那么使用Web安全调色板仍然更安全。
图像的背景
要包含背景图像，您需要控制与background属性关联的各种描述中的一个或多个。这些包括：
- 背景颜色 - 控制要使用的背景颜色
- 背景位置 - 控制图像的放置位置
- Background-size - 控制背景图像的大小（在CSS3中引入）
- 背景重复 - 指定如何垂直，水平或双向重复图像
- Background-origin - 控制图像的定位区域（在CSS3中引入）
- Background-clip - 指定背景图像的绘制区域（在CSS3中引入）
- 背景附件 - 控制图像是滚动还是固定
- 背景图像 - 指定要使用的图像
一般来说，您最常使用图像，重复和位置描述。但是，最佳做法是在背景图像无法加载的情况下，使用背景颜色描述声明颜色。
使用小图像创建图案
平铺图像是创建网站背景的常用方法。此方法通过水平，垂直或水平和垂直重复图像来构建背景。使用此方法的常见原因是创建纹理外观，创建线条和阴影，或为页面添加深度。
使用CSS时，这些背景重复属性将平铺您的图像：
- Repeat-x水平重复图像
- Repeat-y垂直重复图像
- 重复以水平和垂直方向重复图像
- 不重复以避免重复图像
样式表编码看起来像这样：
div.bgClass {
background-image：url（“images / my_background.png”）; //这是你想要重复
背景位置的图像：左上角; //这将图像的第一个实例放在左上角
background-repeat：repeat-x; //这会导致图像从左到右重复
}
您还可以在一个语句中声明所有背景属性：
div.bgClass {
background：url（'images / my_background.png'）repeat-x top left;
}
使用大图像作为背景
当大图像首次放在网页上时，通常的做法是将图像切成小块，这样图像就会更快地出现在页面上。但是，这种做法不再被认为是最佳方法，因为每个图像拼接代表对服务器的调用。总的来说，这些多次通话会减慢您的网站速度 如果您使用的是大图像，只需将其压缩到尽可能小的尺寸，即可保持图像的清晰度。
一种流行的趋势是使用一张大的照片，通常居中，作为背景图像。如果图像没有超过页面，这将为网站创建强大而有趣的外观。无论是模糊还是焦点对齐的图像都会成为内容的背景，并在用户正确设计时吸引用户。使用此外观成功的网站倾向于使用对文本具有自然“开放”的图像。
要将单个图像作为背景，请将其放在样式表中：
div.bgClass {
background-image：url（“images / my_background.png”）;
背景色：＃FF0000; //你应该总是包含一种颜色，以防图像不可用
}
CSS3允许多个图像作为背景：
div.bgClass {
background-image：url（“images / my_background.png”），url（“images / my_second_background.png”）; //用
背景颜色分隔背景：白色;
}
背景做和不做
以下是创建优秀背景的一些提示。
这样做的
- 保持图像清晰; 这通常意味着背景为10KB或更少，标题为60KB，高质量图像为100KB。
- 使用补充设计的背景图像/图形。
- 确保您的图像/设计适合更大的屏幕。
注意事项
- 不要使用“忙”背景来创建混乱。
- 不要依赖背景来进行网站的设计。
- 不要将颜色对比度降低到文本难以阅读的程度。
加载时间很重要
在背景图像方面，移动设备更加改变了游戏场地。习惯于高速互联网连接的用户在较慢的3G或4G网络上下载内容时有些不耐烦。高速互联网可以达到15 Mbps或更高的速度，相比之下，4G的速度约为10 Mbps，3G速度则低于4 Mbps。因此，当您设计网站时，请创建仅限移动设备的版本，或确保您的图片，背景和其他功能足够轻，以便快速下载。