CSS：背景属性

Yui_

发布于 2025-02-03 08:25:18

51200

代码可运行

文章被收录于专栏：Yui编程知识Yui编程知识

运行总次数：0

代码可运行

1. 背景属性

1.1 背景颜色

如果背景一直都是一成不变的，对于一个网页还是挺无趣的，为了让背景更加的生动，可以修改它的颜色。语法：

background-color:[指定颜色]

与设置字体颜色相同，设置设置颜色也由3种格式：

直接写单词。
16进制写法
RGB方式

background-color:red;
background-color:#ff0000;
background-color:rgb(255,0,0);

默认为透明背景：transparent 下面我们来设置背景色

<!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-color: #f3f3f3;/*白色*/
        }
        .bgc .one{
            background-color: red;
        }
        .bgc .two{
            background-color: green;
        }
        .bgc .three{
            background-color: transparent;
        }
    </style>
</head>

<body>
    <div class="bgc">
        <div class="one">
            红色背景
        </div>
        <div class="two">
            绿色背景
        </div>
        <div class="three">
            透明背景
        </div>

        </div>
</body>

</html>

1.2 背景图片

只有颜色还是太单调了，我需要一张图片来充当背景。语法：

background-image:url(...);

下面我插入一张我的头像试试看

<!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(./b_d953d23388c151b4d1b2533729093198.jpg);
        }
    </style>
</head>
<body>
    
</body>
</html>

当图片大小不满足主页时，会生成多张图片填充。除了对整个背景插入图片，还可以对特定的标签插入。

<!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{
            background-image: url(./b_d953d23388c151b4d1b2533729093198.jpg);
        }
    </style>
</head>
<body>
    <div>
        背景图片
    </div>
</body>
</html>

注意：背景颜色和背景图片可以同时存在，背景图片在背景颜色的上方。

1.3 背景平铺

语法：

background-repear:[平铺方式];

repeat：平铺
no-repeat：不平铺
repeat-x：水平平铺
repeat-y：垂直平铺默认是repeat

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .bgr .one {
            background-image: url(./b_d953d23388c151b4d1b2533729093198.jpg);
            height: 300px;
            background-repeat: no-repeat;
        }

        .bgr .two {
            background-image: url(./b_d953d23388c151b4d1b2533729093198.jpg);
            height: 300px;
            background-repeat: repeat-x;
        }

        .bgr .three {
            background-image: url(./b_d953d23388c151b4d1b2533729093198.jpg);
            height: 300px;
            background-repeat: repeat-y;
        }
    </style>
    <div class="bgr">
        <div class="one">不平铺</div>
        <div class="two">水平平铺</div>
        <div class="three">垂直平铺</div>
    </div>
</body>

</html>

1.4 背景位置

修改图片的位置语法：

background-position:x y;

参数有3种命名风格：

方位名称：（top，left，right，bottom）
精确单词：坐标或者百分比（以左上角为原点）
混合单位：同时包含方位名词和精准单位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .bgp .one {
            background-image: url(./b_d953d23388c151b4d1b2533729093198.jpg);
            height: 500px;
            background-repeat: no-repeat;
            background-color: purple;
            background-position: center;
        }
    </style>
    <div class="bgp">
        <div class="one">背景居中</div>
    </div>
</body>

</html>

注意：

如果参数的两个值都是方位名词，顺序不影响最后的结果。（如top left和left top相同）
如果只指定一个方位名词，则第二个默认居中。如（left意味着水平居中，top意味着垂直居中）
如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)
如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中.
如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂直居中)

1.4.1 知识补充-关于坐标系

在计算机中的坐标系和我们在高中阶段使用的坐标系的方向是不同的。

在计算机中的坐标系如上图所示。

1.5 背景尺寸

为了控制背景的尺寸，我们需要学习以下语法：

background-size:[值];

值	说明
auto	默认值，保持背景图片的原始大小
contain	让图片完全显示在元素内，可能会有空白
cover	让图片完全覆盖元素，可能会被裁剪
100px 50px	指定宽高（第一个是宽度，第二个是高度）
50% 100%	相对父元素的宽度和高度进行缩放
inherit	继承父元素的 background-size

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .bgs .one {
            width: 500px;
            height: 300px;
            background-image: url(./b_d953d23388c151b4d1b2533729093198.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
    </style>
    <div class="bgs">
        <div class="one">背景尺寸</div>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .bgs .one {
            width: 500px;
            height: 300px;
            background-image: url(./b_d953d23388c151b4d1b2533729093198.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
    </style>
    <div class="bgs">
        <div class="one">背景尺寸</div>
    </div>
</body>

</html>