9.CSS背景属性-USB迷|专注于互联网分享

9.CSS背景属性

文章目录

- - 1.背景颜色
  - - 1.1属性&值
    - 1.2演示
  - 2.背景图片
  - - 2.1属性&值
    - 2.2演示
  - 3.背景平铺
  - - 3.1属性&值
    - 3.2演示
    - 3.3应用场景
  - 4.背景图片定位
  - - 4.1属性&值
    - 4.2演示
    - - 1.单词定位
      - 2.像素定位
      - 3.图片居中
    - 4.3优先展示
    - 4.4图片拼接
    - 4.5图片重叠
  - 5.背景图片关联
  - - 5.1属性&值
    - 5.2演示
  - 6.属性缩写
  - - 6.1格式
    - 6.2演示
  - 7.背景图片与插入图片的区别
  - - 7.1描述
    - 7.2演示
  - 8.CSS精灵图
  - - 8.1介绍
    - 8.2演示
    - - 1.获取图标1
      - 2.获取图标2

1.背景颜色

1.1属性&值

属性:
background-color 属性设置标签背景颜色.快捷键：
bc+tab background-color:#fff;

值：
1. 单词               部分颜色有英文单词
2. rgb  （ ,,）     三原色数字代码光源的亮度,0不发光,255最亮.
3. rgba （,,,）    a为透明度,取值0~1,值越小月透明. 
4. 十六进制 #FFEEDD   每两组分别代表R/G/B
5. 十六进制缩写       每一组的两个值都相同可以省略只写一位.

rgb颜色：
红色：rgb(255,0,0)
绿色：rgb(0,255,0)
蓝色：rgb(0,0,255)
黑色：rgb(0,0,0)
白色：rgb(255,255,255)
三个值一样,越小就越黑否则偏白.
开发中的字体颜色黑色太刺眼,除标题外一般用灰色.

10/16进制转换：
16进制的第一位*16+第二位=10进制.
FF == 16 * 1 6 + 15 = 255
红色: #FF0000 #F00
绿色：#00FF00 #0F0
蓝色：#0000FF #00F

在模仿别的网页的时候,使用取色器,直接去获取颜色.

1.2演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景颜色属性</title><style>div {height: 100px;}.box1 {background: red;}.box2 {background: rgb(100, 100, 100);}.box3 {background: rgba(100,100,100,0.5);}.box4 {background: #AAAAAA;}.box5 {background: #666;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div>
</body>
</html>

2.背景图片

2.1属性&值

background-image:url(""); 属性设置背图片.
url("")中写图片地址,可以是网络/本地的.注意：
如果图片的大小,没有标签大,那么会自动在水平和垂直方向平铺和填充.快捷键：
bi+tab background-image:url("");

2.2演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景图片属性</title><style>div {height: 380px;width: 240px;background-image: url(".gif");}</style>
</head>
<body><div></div>
</body>
</html>

3.背景平铺

3.1属性&值

background-repeat 属性设置图片平铺方式.值：
repeat;    默认,xy轴平铺.
repeat-x;  x轴平铺（水平）.
repeat-y;  y轴平铺（垂直）.
no-repeat; x,y轴都不平铺.快捷键：
bgr+tab background-repeat:

应用场景：
为网页设置背景图片,图片越大,需要加载的时间越长,
通过平铺来降低图片的大小,提示网页的访问速度（有规律的图片才行.）

3.2演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景图片平铺属性</title><style>div {height: 300px;width: 300px;}.box1 {background-image:url(".gif");background-repeat:repeat-x;}</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

3.3应用场景

找一张有规律,x,y轴平铺.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景图片平铺属性</title><style>div {height: 1080px;width: 1920px;}.box1 {background-image: url(".png");}</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

4.背景图片定位

4.1属性&值

background-position 属性设置背景图片的位置.
background-position  垂直方向  水平方向;值：(默认为左上)
1.具体方位单词 水平方向：left center right  左 居中 右垂直方向：top  center bottom 上 居中 
2.具体像素（单元px,为0才能省略单位）前一位值,从左往右移动xx px;后一位值,从上往徐下移动xx px;* 移动是的参考点是图片的左上角的点（值可以是负数,负数值以相反的方向移动）注意：
同一个标签可以同时设置背景颜色和背景图片,如果颜色和图片同时存在,图片会覆盖背景颜色.快捷键：
bp+tab background-position:0 0;

4.2演示

1.单词定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景定位属性(单词)</title><style>div {height: 300px;width: 300px;background: #00ff19;}.box1 {background-image:url(".jpg");background-repeat: no-repeat;background-position:top left ;  /* 垂直方向 上  水平方向 左 */}.box2 {background-image: url(".jpg");background-repeat: no-repeat;background-position: bottom right;  /* 垂直方向 下   水平方向 右 */}</style>
</head>
<body><div class="box1"></div><hr><div class="box2"></div>
</body>
</html>

2.像素定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景定位属性(数值)</title><style>div {height: 300px;width: 300px;background: red;}.box1 {background-image: url(".jpg");background-repeat: no-repeat;background-position: 100px 0;}.box2 {background-image: url(".jpg");background-repeat: no-repeat;background-position: -100px -100px;}</style>
</head>
<body><div class="box1"></div><hr><div class="box2"></div>
</body>
</html>

3.图片居中

图片中居中计算,  区域范围/2-图片大小/2(px).
图片96*96,div300*300
居中计算：
300/2 + 96/2 = 150-48=102
上下移动102图片正中心居中.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片居中</title><style>.box1 {width: 300px;height: 300px;background-color: aqua;background-image: url('.png');background-repeat: no-repeat;  /* 不平铺 */background-position: 102px;}</style>
</head>
<body><div class="box1"></div>
</body>
</html>

4.3优先展示

在拖动浏览器窗口时,网页始终将图片中间的重要信息给展示出来.
通常设置为 background-position: center top;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景定位属性(应用场景)</title><style>div {height: 1080px;}.box1 {background-image: url(".png");background-position: center top;}.box2 {background-image: url(".gif");background-position: center top;}</style>
</head>
<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
</body>
</html>

4.4图片拼接

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>练习1</title><style>div {width: 1285px;height: 632px;}.box1 {background-image: url(".png");}.box2 {background-image: url(".jpg");background-repeat: no-repeat;background-position: center bottom;}</style>
</head>
<body>
<div class="box1"><div class="box2"></div>
</div></body>
</html>

4.5图片重叠

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>练习1</title><style>div {width: 1285px;height: 632px;}.box1 {background-image: url(".png");}.box2 {background-image: url(".png");background-repeat: no-repeat;background-position: center bottom;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div>
</body>
</html>

5.背景图片关联

5.1属性&值

background-attachment 属性设置背景图片与滚动条之间的关联方式.
背景图片与滚动条之间存在关联,背景图片默认会随着滚动条滚动.
值：
scroll; 滚动,默认,背景图片会随着滚动条滚动.
fixed;  固定,背景图片固定,不会随着滚动条滚动.快捷键:
ba+tab background-attachment:;

5.2演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景图片关联方式</title><style>.box1 {background-image: url(".png");background-repeat: no-repeat;background-attachment: fixed;}</style>
</head>
<body>
<div class="box1">x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>
</div>
</body>
</html>

6.属性缩写

6.1格式

背景属性缩写格式：
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;注意：
background中可以省略任何一个属性值. 快捷键：(可能失效)
gb+ +tab: background: #fff url() 0 0 no-repeat;

6.2演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景属性缩写</title><style>div {width: 300px;height: 300px;}.box1 {background-color: aqua;background-image: url(".png");background-repeat: no-repeat;background-position: center;}.box2 {background: red url(".png") no-repeat center;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

7.背景图片与插入图片的区别

7.1描述

背景图片：仅仅是一个装饰,不会占用位置,有定位属性可以控制图片位置.
插入图片：会占用位置,没有定位属性,控制图片位置难.搜索引擎能收录.

7.2演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景图片与插入图片的区别</title><style>div {height: 300px;width: 300px;background-color: red;}.box1 {background-image: url(".png");background-repeat: no-repeat;background-position: center center;}</style>
</head>
<body><div class="box1"><p>图片背景</p></div><br><div class="box2"><img src=".png" alt=""><p>图片标签</p></div>
</body>
</html>

8.CSS精灵图

8.1介绍

CSS精灵图是一种图像合成技术.
（每一张图片都发送请求获取图片,将网页的图片合成一张大图,减少请求的次数.图片就增大了.）
作用：减少请求的次数,降低服务器处理压力.
CSS精灵图需要配合背景图片和背景定位来使用.使用Adobe Fireworks CS6 工具 中的web切片工具快速找到图片的位置.

8.2演示

1.获取图标1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>获取图标1</title><style>div {height: 114px;width: 114px;background-image: url(".jpg");}.box1  {background-position: -583px -497px;}.box2 {background-position: -185px -375px;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

2.获取图标2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>精灵图练习</title><style>div {width: 140px;height: 140px;display: inline-block;  /* 设置为行内块级标签  */background-image: url(".jpg");}.box1 {background-position: -1041px -1443px;}.box2 {background-position: -1445px -1442px}.box3 {background-position: -1832px -1644px;}.box4 {background-position: -237px -245px;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div>
</body>
</html>

9.CSS背景属性

文章目录

- - 1.背景颜色
  - - 1.1属性&值
    - 1.2演示
  - 2.背景图片
  - - 2.1属性&值
    - 2.2演示
  - 3.背景平铺
  - - 3.1属性&值
    - 3.2演示
    - 3.3应用场景
  - 4.背景图片定位
  - - 4.1属性&值
    - 4.2演示
    - - 1.单词定位
      - 2.像素定位
      - 3.图片居中
    - 4.3优先展示
    - 4.4图片拼接
    - 4.5图片重叠
  - 5.背景图片关联
  - - 5.1属性&值
    - 5.2演示
  - 6.属性缩写
  - - 6.1格式
    - 6.2演示
  - 7.背景图片与插入图片的区别
  - - 7.1描述
    - 7.2演示
  - 8.CSS精灵图
  - - 8.1介绍
    - 8.2演示
    - - 1.获取图标1
      - 2.获取图标2

1.背景颜色

1.1属性&值

属性:
background-color 属性设置标签背景颜色.快捷键：
bc+tab background-color:#fff;

值：
1. 单词               部分颜色有英文单词
2. rgb  （ ,,）     三原色数字代码光源的亮度,0不发光,255最亮.
3. rgba （,,,）    a为透明度,取值0~1,值越小月透明. 
4. 十六进制 #FFEEDD   每两组分别代表R/G/B
5. 十六进制缩写       每一组的两个值都相同可以省略只写一位.

rgb颜色：
红色：rgb(255,0,0)
绿色：rgb(0,255,0)
蓝色：rgb(0,0,255)
黑色：rgb(0,0,0)
白色：rgb(255,255,255)
三个值一样,越小就越黑否则偏白.
开发中的字体颜色黑色太刺眼,除标题外一般用灰色.

10/16进制转换：
16进制的第一位*16+第二位=10进制.
FF == 16 * 1 6 + 15 = 255
红色: #FF0000 #F00
绿色：#00FF00 #0F0
蓝色：#0000FF #00F

在模仿别的网页的时候,使用取色器,直接去获取颜色.

1.2演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景颜色属性</title><style>div {height: 100px;}.box1 {background: red;}.box2 {background: rgb(100, 100, 100);}.box3 {background: rgba(100,100,100,0.5);}.box4 {background: #AAAAAA;}.box5 {background: #666;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div>
</body>
</html>

2.背景图片

2.1属性&值

background-image:url(""); 属性设置背图片.
url("")中写图片地址,可以是网络/本地的.注意：
如果图片的大小,没有标签大,那么会自动在水平和垂直方向平铺和填充.快捷键：
bi+tab background-image:url("");

2.2演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景图片属性</title><style>div {height: 380px;width: 240px;background-image: url(".gif");}</style>
</head>
<body><div></div>
</body>
</html>

3.背景平铺

3.1属性&值

background-repeat 属性设置图片平铺方式.值：
repeat;    默认,xy轴平铺.
repeat-x;  x轴平铺（水平）.
repeat-y;  y轴平铺（垂直）.
no-repeat; x,y轴都不平铺.快捷键：
bgr+tab background-repeat:

应用场景：
为网页设置背景图片,图片越大,需要加载的时间越长,
通过平铺来降低图片的大小,提示网页的访问速度（有规律的图片才行.）

3.2演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景图片平铺属性</title><style>div {height: 300px;width: 300px;}.box1 {background-image:url(".gif");background-repeat:repeat-x;}</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

3.3应用场景

找一张有规律,x,y轴平铺.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景图片平铺属性</title><style>div {height: 1080px;width: 1920px;}.box1 {background-image: url(".png");}</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

4.背景图片定位

4.1属性&值

background-position 属性设置背景图片的位置.
background-position  垂直方向  水平方向;值：(默认为左上)
1.具体方位单词 水平方向：left center right  左 居中 右垂直方向：top  center bottom 上 居中 
2.具体像素（单元px,为0才能省略单位）前一位值,从左往右移动xx px;后一位值,从上往徐下移动xx px;* 移动是的参考点是图片的左上角的点（值可以是负数,负数值以相反的方向移动）注意：
同一个标签可以同时设置背景颜色和背景图片,如果颜色和图片同时存在,图片会覆盖背景颜色.快捷键：
bp+tab background-position:0 0;

4.2演示

1.单词定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景定位属性(单词)</title><style>div {height: 300px;width: 300px;background: #00ff19;}.box1 {background-image:url(".jpg");background-repeat: no-repeat;background-position:top left ;  /* 垂直方向 上  水平方向 左 */}.box2 {background-image: url(".jpg");background-repeat: no-repeat;background-position: bottom right;  /* 垂直方向 下   水平方向 右 */}</style>
</head>
<body><div class="box1"></div><hr><div class="box2"></div>
</body>
</html>

2.像素定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景定位属性(数值)</title><style>div {height: 300px;width: 300px;background: red;}.box1 {background-image: url(".jpg");background-repeat: no-repeat;background-position: 100px 0;}.box2 {background-image: url(".jpg");background-repeat: no-repeat;background-position: -100px -100px;}</style>
</head>
<body><div class="box1"></div><hr><div class="box2"></div>
</body>
</html>

3.图片居中

图片中居中计算,  区域范围/2-图片大小/2(px).
图片96*96,div300*300
居中计算：
300/2 + 96/2 = 150-48=102
上下移动102图片正中心居中.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片居中</title><style>.box1 {width: 300px;height: 300px;background-color: aqua;background-image: url('.png');background-repeat: no-repeat;  /* 不平铺 */background-position: 102px;}</style>
</head>
<body><div class="box1"></div>
</body>
</html>

4.3优先展示

在拖动浏览器窗口时,网页始终将图片中间的重要信息给展示出来.
通常设置为 background-position: center top;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景定位属性(应用场景)</title><style>div {height: 1080px;}.box1 {background-image: url(".png");background-position: center top;}.box2 {background-image: url(".gif");background-position: center top;}</style>
</head>
<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
</body>
</html>

4.4图片拼接

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>练习1</title><style>div {width: 1285px;height: 632px;}.box1 {background-image: url(".png");}.box2 {background-image: url(".jpg");background-repeat: no-repeat;background-position: center bottom;}</style>
</head>
<body>
<div class="box1"><div class="box2"></div>
</div></body>
</html>

4.5图片重叠

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>练习1</title><style>div {width: 1285px;height: 632px;}.box1 {background-image: url(".png");}.box2 {background-image: url(".png");background-repeat: no-repeat;background-position: center bottom;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div>
</body>
</html>

5.背景图片关联

5.1属性&值

background-attachment 属性设置背景图片与滚动条之间的关联方式.
背景图片与滚动条之间存在关联,背景图片默认会随着滚动条滚动.
值：
scroll; 滚动,默认,背景图片会随着滚动条滚动.
fixed;  固定,背景图片固定,不会随着滚动条滚动.快捷键:
ba+tab background-attachment:;

5.2演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景图片关联方式</title><style>.box1 {background-image: url(".png");background-repeat: no-repeat;background-attachment: fixed;}</style>
</head>
<body>
<div class="box1">x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>x <br>     x <br>     x <br>     x <br>
</div>
</body>
</html>

6.属性缩写

6.1格式

背景属性缩写格式：
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;注意：
background中可以省略任何一个属性值. 快捷键：(可能失效)
gb+ +tab: background: #fff url() 0 0 no-repeat;

6.2演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景属性缩写</title><style>div {width: 300px;height: 300px;}.box1 {background-color: aqua;background-image: url(".png");background-repeat: no-repeat;background-position: center;}.box2 {background: red url(".png") no-repeat center;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

7.背景图片与插入图片的区别

7.1描述

背景图片：仅仅是一个装饰,不会占用位置,有定位属性可以控制图片位置.
插入图片：会占用位置,没有定位属性,控制图片位置难.搜索引擎能收录.

7.2演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景图片与插入图片的区别</title><style>div {height: 300px;width: 300px;background-color: red;}.box1 {background-image: url(".png");background-repeat: no-repeat;background-position: center center;}</style>
</head>
<body><div class="box1"><p>图片背景</p></div><br><div class="box2"><img src=".png" alt=""><p>图片标签</p></div>
</body>
</html>

8.CSS精灵图

8.1介绍

CSS精灵图是一种图像合成技术.
（每一张图片都发送请求获取图片,将网页的图片合成一张大图,减少请求的次数.图片就增大了.）
作用：减少请求的次数,降低服务器处理压力.
CSS精灵图需要配合背景图片和背景定位来使用.使用Adobe Fireworks CS6 工具 中的web切片工具快速找到图片的位置.

8.2演示

1.获取图标1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>获取图标1</title><style>div {height: 114px;width: 114px;background-image: url(".jpg");}.box1  {background-position: -583px -497px;}.box2 {background-position: -185px -375px;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

2.获取图标2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>精灵图练习</title><style>div {width: 140px;height: 140px;display: inline-block;  /* 设置为行内块级标签  */background-image: url(".jpg");}.box1 {background-position: -1041px -1443px;}.box2 {background-position: -1445px -1442px}.box3 {background-position: -1832px -1644px;}.box4 {background-position: -237px -245px;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div>
</body>
</html>

USB迷 | 专注于互联网分享

9.CSS背景属性

文章目录

1.背景颜色

1.1属性&值

1.2演示

2.背景图片

2.1属性&值

2.2演示

3.背景平铺

3.1属性&值

3.2演示

3.3应用场景

4.背景图片定位

4.1属性&值

4.2演示

1.单词定位

2.像素定位

3.图片居中

4.3优先展示

4.4图片拼接

4.5图片重叠

5.背景图片关联

5.1属性&值

5.2演示

6.属性缩写

6.1格式

6.2演示

7.背景图片与插入图片的区别

7.1描述

7.2演示

8.CSS精灵图

8.1介绍

8.2演示

1.获取图标1

2.获取图标2

9.CSS背景属性

文章目录

1.背景颜色

1.1属性&值

1.2演示

2.背景图片

2.1属性&值

2.2演示

3.背景平铺

3.1属性&值

3.2演示

3.3应用场景

4.背景图片定位

4.1属性&值

4.2演示

1.单词定位

2.像素定位

3.图片居中

4.3优先展示

4.4图片拼接

4.5图片重叠

5.背景图片关联

5.1属性&值

5.2演示

6.属性缩写

6.1格式

6.2演示

7.背景图片与插入图片的区别

7.1描述

7.2演示

8.CSS精灵图

8.1介绍

8.2演示

1.获取图标1

2.获取图标2

与本文相关的文章

评论列表 (0)