首页 CSS

# CSS 背景相关属性

# 背景颜色

  • 属性名 : background-color (bgc)
  • 属性值 :
    • 颜色取值：关键字，rgb 表示法，rgba 表示法，十六进制..
  • 注意点 :
    • 背景颜色默认值是透明，rgba (0,0,0,0), transparent
    • 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景颜色</title>
    <style>
        div {
            /*background-color: pink;*/
            /*background-color: #cccccc;*/
            /*background-color: rgb(255, 0, 0);*/
            background-color: rgba(255,255,128,100);
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

# 背景图片

  • 属性名 : background-image (bgi)
  • 属性值 : background-image: url (‘图片路径’);
  • 注意点 :
    • 背景图片中 url 可以省略引号
    • 背景图片默认是在水平和垂直方向平铺的
    • 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能直接撑开盒子的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片</title>
    <style>
        div {
            height: 1417px;
            width: 2544px;
            background-color: pink;
            background-image: url('中国核心舱.png');
        }
    </style>
</head>
<body>
    <div>我是div标签</div>
</body>
</html>

# 背景平铺

  • 属性名 : background-repeat (bgr)

  • 属性值 :

    取值效果
    repeat(默认值) 水平和垂直方向都平铺
    no-repeat不平铺
    repeat-x沿着水平方向 (x 轴) 平铺
    repeat-y沿着垂直方向 (y 轴) 平铺
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景平铺</title>
        <style>
            div {
                background-image: url('中国核心舱.png');
                background-repeat: no-repeat;
                /*background-repeat: repeat-x;*/
                /*background-repeat: repeat-y;*/
                width: 50000px;
                height: 500000px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div>div标签就是我</div>
    </body>
    </html>

# 背景位置

  • 属性名 : background-position (bgp)

  • 属性值 : background-position: 水平方向位置 垂直方向位置；

  • graph TD
    A(属性值)-->B1(1. 方位名词--最多只能表示9个位置)
    A-->B2(2. 数字 + px--坐标)
    B1-->C1(水平方向)
    B1-->C2(垂直方向)
    C1-->D1(left)
    C1-->D2(center)
    C1-->D3(right)
    C2-->D4(top)
    C2-->D5(center)
    C2-->D6(buttom)
    B2-->C3(坐标系)
    B2-->C4(操作)
    C3-->D7(原点 0,0)
    D7-->E1(盒子的左上角)
    C3-->D8(x轴)-->E2(水平向右)
    C3-->y轴-->垂直向下
    C4-->将图片左上角与坐标点重合即可

  • 注意点 :

    • 方位名词取值和坐标取值可以混合使用，第一个取值表示水平，第二个取值表示垂直

# img 标签和背景图片的区别

  • 需求：需要在网页中展示一张图片的效果
  • 方法 1 : 直接写上 img 标签即可
    • img 标签是一个标签，不设置宽高默认会以原尺寸显示
  • 方法 2 : div 标签 + 背景图片
    • 需要设置 div 的宽度，因为背景图片只是装饰的 CSS 样式，不能撑开 div 标签
  • 注意点 :
    • img 标签实现较为重要的图片