背景相关属性

什么是叫背景

背景的概念最早提出是在摄影和图像处理领域,

主要目的是为了突出主体, 通常会用一个背景来衬托. 比如证件照

365e1b0057f9c361dd2f76ccdfa6b53c

网页一开始主要也是来处理文字和图片, 就借鉴了背景这个概念

背景可以纯色的, 也可以是一张图片

# 1 背景颜色(color)

语法

background-color:颜色值;   默认的值是 transparent  透明的

如果要设置背景, 元素必须有宽高!

# 2 背景图片(image)

语法

background-image : none | url (url)

参数	作用
none	无背景图（默认值）
url	使用相对地址指定背景图像

background-image : url(images/demo.png);

# 1) 背景图片与插入图片的区别

img元素: 属于HTML的范畴, 当图片是HTML结构的一个组成部分时, 使用img
背景图片: 属于CSS的范畴, 当图片只是为了美化, 使用背景图片

示例

比如一篇文章, 除了文字描述外, 为了更好的表达要说明的内容, 配了一张图, 这张图就是网页的组成部分,是一个HTML的元素, 就使用img

这里是一个按钮(属于HTML功能), 但是为了让这个按钮更漂亮, 使用背景图片

# 2) 路径

在CSS中的路径是相对于CSS文件的.

# 3 背景平铺（repeat）

默认情况下背景图片是铺满整个容器的, 就好比贴地板, 这样做的好处是可以减小整个图片的体积, 加快网站的访问速度

语法

background-repeat : repeat | no-repeat | repeat-x | repeat-y

参数	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-image: url('./images/bg.jpg');
      }
    </style>
  </head>
  <body></body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 4 背景位置(position)

语法

background-position : length || length

background-position : position || position

1
2
3

参数	值
length	百分数 \| 由浮点数字和单位标识符组成的长度值
position	top \| center \| bottom \| left \| center \| right 方位名词

注意：
- 必须先指定background-image属性
- position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
- 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
- 如果只指定了一个方位名词，另一个值默认居中对齐。
- 如果position 后面是精确坐标，那么第一个，肯定是 x 第二的一定是y
- 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
- 如果指定的两个值是精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 600px;
        height: 600px;
        background-color: #aaa;
        background-image: url(./images/money.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        /* background-position: 100px 100px; */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 5 背景简写

建议

background: 背景颜色背景图片地址背景平铺背景位置

示例

background: transparent url(image.jpg) repeat-y center top ;

# 6 背景图的应用

精灵图, 很多时候, 我们可以把多个小图标整合到一起, 再通过position调节找出我们想要的背景图.

优势

可以减少请求次数

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        height: 40px;
        width: 40px;
        background-image: url('./images/icon.png');
        background-position: -130px -35px;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

如果觉得有帮助, 可以微信扫码, 请杰哥喝杯咖啡~

上次更新: 2021/09/03, 15:32:17

← 文本相关属性 CSS的特性→