本文是HTML及CSS课程的第十三课。主要介绍和页面背景相关的CSS样式属性，如背景颜色、背景图片、背景图片平铺方式等等

文章目录

一、web中的图片
- 1、web中常见的图片格式
- - 1.1、JPEG
  - 1.2、PNG
  - 1.3、GIF
- 2、web中常见的图片类型
- - 2.1、内容图片
  - 2.2、交互图片
  - 2.3、布局图片
二、背景
- 1、背景颜色
- 2、背景图片路径
- 3、背景图片平铺
- 4、背景图片位置
- 5、图片精灵
- 6、多张背景图片
- 7、背景图片尺寸
- 8、背景图片定位区域
- 9、背景剪裁区域
- 10、简写形式

一、web中的图片

1、web中常见的图片格式

web中我们常见的图片格式有JPEG（Joint Photographic Experts Group）、PNG（Portable Network Graphics）和GIF（Graphics Interchange Format）。

1.1、JPEG

JPEG格式的图片文件扩展名为.jpg或.jpeg。
JPEG格式的图片可以展示一张照片或非常复杂图像。
JPEG格式可以表示256 x 256 x 256 = 16777216 种颜色，即所有的RGB颜色。
JPEG格式的图片不支持图像透明。
JPEG格式的图片不支持动画。

1.2、PNG

PNG格式的图片文件扩展名为.png。
PNG格式的图片适合展示网页插画，logo及网页中的小图标（icon）。
PNG格式可以表示上百万种不同颜色。
PNG格式有8位、24位、32位三种形式，24位PNG不支持图像透明，8位PNG和32位PNG支持图像透明。
PNG格式的图片不支持动画。

1.3、GIF

GIF格式的图片文件扩展名为.gif。
GIF格式是网络中运用最早的图片格式，适合网页插画，logo及网页中的小图标（icon）。
GIF格式最多只能表示256种颜色。
GIF格式支持图像透明。
GIF格式支持动画。

综上，结合这几种图片格式各自的特点，我们在web中使用图片时，一般复杂颜色的图像和照片使用JPEG格式，动态图像使用GIF格式，而透明图片一般使用png格式（png格式较GIF格式更平滑）。

2、web中常见的图片类型

web中的图片按作用分类大致可以划分为内容图片、交互图片、布局图片。

2.1、内容图片

内容图片是页面中真正需要的内容，没有内容图片就无法完整的理解页面的内容信息。如：

在web中添加内容图片时通常在HTML文档中使用<img />标签。

2.2、交互图片

交互图片承载页面中一定的交互功能，会给用户浏览页面带来一定的帮助。如：

交互图片一般是一些小图标（icon），常常使用PNG格式或GIF格式。添加交互图片时，有时会在HTML文档中使用<img />标签，有时会在CSS文档中使用背景系列的样式属性和图片精灵，而随着HTML5和CSS3的流行，现在越来越多的网页开始使用字体图标来实现。

2.3、布局图片

布局图片一般出现在页面的背景中，对于了解页面的具体内容信息，它们并不是必须的。如：

布局图片一般需要使用CSS中背景系列的样式属性来添加，这也是为了符合内容与表现分离的规范。

二、背景

在CSS中，可以通过一些列的样式属性为元素设置背景颜色、背景图片等。

1、背景颜色

在CSS中使用background-color属性来定义元素的背景颜色，前面的章节中我们已经看到很多应用这一属性的例子，这里不再赘述。

2、背景图片路径

在CSS中使用background-image属性为元素添加背景图片。
下面是一个示例：
需要使用的背景图片（尺寸 150像素 x 150像素）：

HTML源码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> 背景图片路径 </title><style type="text/css">* {margin: 0; border: 0; padding: 0;}.d-background {height: 300px;background-color: #8a4438;background-image: url("images/brick.png");}</style></head><body><div class="d-background"></div></body>
</html>

页面浏览效果：

说明：

样式属性background-image的值要指定一个图片路径，图片路径写在url("")中，""可以省略，可以使用相对路径或绝对路径。
一般在设置背景图片前，会先给元素一个和背景图片底色相近的背景颜色，在背景图片由于网络等原因无法加载时，至少页面不会太单调。

3、背景图片平铺

在CSS中使用background-repeat属性控制元素背景图片的平铺方式。
下面是一个示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> 背景图片平铺 </title><style type="text/css">* {margin: 0; border: 0; padding: 0;}.d-background {height: 300px;background-color: #8a4438;background-image: url("images/brick.png");background-repeat: no-repeat;}</style></head><body><div class="d-background"></div></body>
</html>

页面浏览效果：

说明：

样式属性background-repeat常用值及说明如下;

样式属性及值	说明
`background-repeat: no-repeat;`	背景图片不平铺，图片显示在元素的左上角
`background-repeat: repeat-x;`	背景图片沿着x轴平铺
`background-repeat: repeat-y;`	背景图片沿着y轴平铺
`background-repeat: repeat;`	背景图片沿着x轴和y轴平铺，`repeat`为`background-repeat`属性的默认值

4、背景图片位置

在CSS中样式属性background-position可以控制背景图片在元素中显示的位置。
下面是一个示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> 背景图片位置 </title><style type="text/css">* {margin: 0; border: 0; padding: 0;}.d-background {height: 300px;background-color: #8a4438;background-image: url("images/brick.png");background-repeat: no-repeat;background-position: bottom center;}</style></head><body><div class="d-background"></div></body>
</html>

页面浏览效果：

说明：

样式属性background-position可以设置两个值。第一个值表示背景图片在容器元素中纵向的位置，可能的值为top（默认）、center、bottom或者数值；第二个值表示背景图片在容器元素中横向的位置，可能的值为left（默认）、center、right或者数值。

5、图片精灵

web中的一些小图标（icon），常常使用PNG或GIF格式，很多情况下，我们仍然使用CSS中的背景系列样式属性，以背景的形式展示这些图片。为了减少网络请求次数，常常会将这些小图片都放在一张较大的图片中。通常我们将这种图片称之为图片精灵。
下面是一个示例：
需要使用的图片精灵（尺寸 28像素 x 56像素）：

HTML源码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> 图片精灵 </title><style type="text/css">* {margin: 0;border: 0;padding: 0;}a {text-decoration: none;}.login-bar {position: absolute;top: 20px;right: 50px;background-color: lightskyblue;}.login-bar a {color: #FFFFFF;font: 16px/28px 微软雅黑, sans-serif;background-image: url("images/icons.png");}.login-bar a:hover {color: #EFEFEF;}.qq-login, .wb-login {display: block;float: left;width: 82px;height: 28px;padding-left: 28px;}.qq-login {background-position: 0 0;}.wb-login {background-position: 0 -28px;}</style></head><body><div class="login-bar"><a href="#" class="qq-login">qq登陆</a><a href="#" class="wb-login">微博登陆</a></div></body>
</html>

页面浏览效果：

说明：

图片精灵配合background-position属性，可以使其中的不同小图标显示在网页中不同的位置。以元素的左上角为坐标(0, 0)点，向右为横轴正方向，向下为纵轴正方向，建立坐标系，background-position属性配置的两个值即为图片精灵的左上角在该坐标系中的x轴坐标值和y轴坐标值。本例中图标位置截取的示意如下：

6、多张背景图片

在CSS中，我们可以为一个元素设置多张背景图片。
下面是一个示例：
需要使用的第一张背景图片（尺寸 150像素 x 150像素）：

需要使用的第二张背景图片（尺寸 150像素 x 150像素）：

HTML源码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> 多张背景图片 </title><style type="text/css">* {margin: 0; border: 0; padding: 0;}.d-background {width: 200px;height: 200px;background-image: url("images/bg1.png"), url("images/bg2.png");background-repeat: no-repeat;background-position: top left, bottom right;}</style></head><body><div class="d-background"></div></body>
</html>

页面浏览效果：

说明

在CSS背景属性中，使用,分隔，可以定义多张背景图片及背景图的相关属性。
先定义的背景图片会覆盖后定义的背景图片。

7、背景图片尺寸

在CSS中样式属性background-size可以设置背景图片的尺寸。
下面是一个示例：
需要使用的背景图片（尺寸 250像素 x 250像素）：

HTML源码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> 背景图片尺寸 </title><style type="text/css">* {margin: 10px; border: 0; padding: 0;}.d-background {width: 300px;height: 250px;float: left;background-color: lightgray;background-image: url("images/bg.png");background-repeat: no-repeat;}.d2 {background-size: 300px 250px;}.d3 {background-size: 300px;}.d4 {background-size: 50% 50%;}.d5 {background-size: cover;}.d6 {background-size: contain;}</style></head><body><div class="d-background"></div><div class="d-background d2"></div><div class="d-background d3"></div><div class="d-background d4"></div><div class="d-background d5"></div><div class="d-background d6"></div></body>
</html>

页面浏览效果：

说明：

样式属性background-size在定义背景图片尺寸时，属性值可以使用长度数值，百分比或关键字（cover和contain）。
使用长度数值设置背景图片的宽度和高度时，第一个值为宽度，第二个值为高度。如果只给出第一个值，第二个值即为auto，图片会等比例缩放。
使用百分比设置背景图片的宽度和高度时，表示相对于所在区域的百分比。第一个值设置宽度，第二个值设置高度。如果只给出第一个值，第二个值即为auto，图片会等比例缩放。
使用关键字cover，表示保持图像的长宽比例，并将图像缩放成刚好完全覆盖所在区域的最小尺寸。
使用关键字contain，表示保持图像的长宽比例，并将图像缩放成刚好完全显示在所在区域内的最大尺寸。

8、背景图片定位区域

在CSS中，可以使用background-origin属性定义背景图片的定位区域。
下面是一个示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> 背景图片定位区域 </title><style type="text/css">* {margin: 10px; border: 0; padding: 0;}.d-background {width: 250px;height: 250px;float: left;border: 30px dashed lightsalmon;padding: 30px;background-color: lightgray;background-image: url("images/bg.png");background-repeat: no-repeat;}.d1 {background-origin: content-box;}.d2 {background-origin: border-box;}.d3 {background-origin: padding-box;}</style></head><body><div class="d-background d1"></div><div class="d-background d2"></div><div class="d-background d3"></div></body>
</html>

页面浏览效果：

说明：

样式属性background-origin的属性值为content-box时，表示背景图片在内容区域进行定位。
样式属性background-origin的属性值为border-box时，表示背景图片以边框为基准进行定位。
样式属性background-origin的属性值为padding-box时，表示背景图片在填充区域进行定位。这也是该属性的默认值。

9、背景剪裁区域

在CSS中，可以使用background-clip属性定义背景的剪裁区域。
下面是一个示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> 背景剪裁区域 </title><style type="text/css">* {margin: 10px; border: 0; padding: 0;}.d-background {width: 160px;height: 160px;float: left;border: 30px dashed lightsalmon;padding: 30px;background-color: lightgray;background-image: url("images/bg.png");background-repeat: no-repeat;background-origin: border-box;}.d1 {background-clip: content-box;}.d2 {background-clip: border-box;}.d3 {background-clip: padding-box;}</style></head><body><div class="d-background d1"></div><div class="d-background d2"></div><div class="d-background d3"></div></body>
</html>

页面浏览效果：

说明：

样式属性background-clip的属性值为content-box时，表示剪裁超出盒子内容区域的背景。
样式属性background-clip的属性值为border-box时，表示剪裁超出盒子边框的背景，这也是background-clip属性的默认值。
样式属性background-clip的属性值为padding-box时，表示剪裁超出盒子填充区域的背景。

10、简写形式

在CSS中可以使用background属性一次设置常用的背景属性，background属性的常用语法格式如下：

background: [background-color] [background-image] [background-position][/background-size] [background-repeat] [background-origin] [background-clip];

下面是一个示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> 背景图片简写形式 </title><style type="text/css">* {margin: 0; border: 0; padding: 0;}.d-background {width: 350px;height: 350px;border: 30px dashed lightsalmon;padding: 30px;background: url("images/bg.png") top left/80% repeat padding-box content-box lightgray ;}</style></head><body><div class="d-background"></div></body>
</html>

页面浏览效果：

说明：

各个属性书写的位置大多可以调换。
属性background-size可选，如果需要设置，要紧跟在background-position属性后面的/后。
属性background-origin应该出现在属性background-clip之前。

HTML及CSS学习笔记 13 - 背景相关推荐

【温故知新】CSS学习笔记（背景）
CSS背景 1.background-color:背景色: 例如:background-color: #000; 外部链接 :CSS颜色表 2.background-image:背景图片: 例如:ba ...
CSS学习笔记(七) 背景
在CSS里面,每个元素盒子都可以想象成由两个图层组成. 前景层:内容(如文本或图片)和边框. 背景层:用实色填充(使用 background-color 属性),也可以包含任意多个背景图片(使用 ba ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
opencv进阶学习笔记13：图像形态学操作大全（膨胀，腐蚀，开闭，黑帽，顶帽，梯度）python版
基础版学习笔记: python3+opencv学习笔记汇总目录(适合基础入门学习) 进阶版笔记目录链接: python+opencv进阶版学习笔记目录(适合有一定基础) 基础版形态学: opencv学 ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中背景图片 ie6 ie7 margin 杂谈分类: 网页制作 1.IE6中用了float之后导致m ...
CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型外边距margin 内边距padding 背景background 背景图background-image 边框border 样式宽度颜色圆角边框图片border- ...
CSS学习笔记——精灵图(sprite)
CSS学习笔记目录一.什么是精灵图? 二.精灵图的优点三.精灵图的基本用法 1.打开ps导入精灵图 2.测量字母的大小及坐标 3.效果图 4.代码实现总结一.什么是精灵图? 所谓精灵图就是图片 ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...

HTML及CSS学习笔记 13 - 背景

文章目录

一、web中的图片

1、web中常见的图片格式

1.1、JPEG

1.2、PNG

1.3、GIF

2、web中常见的图片类型

2.1、内容图片

2.2、交互图片

2.3、布局图片

二、背景

1、背景颜色

2、背景图片路径

3、背景图片平铺

4、背景图片位置

5、图片精灵

6、多张背景图片

7、背景图片尺寸

8、背景图片定位区域

9、背景剪裁区域

10、简写形式

HTML及CSS学习笔记 13 - 背景相关推荐

最新文章

热门文章