CSS05：背景属性

最新推荐文章于 2026-07-23 16:43:40 发布

原创最新推荐文章于 2026-07-23 16:43:40 发布 · 148 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端三剑客

属性	描述
background-color	设置背景颜色
background-image	背景图片
background-position	背景图片显示位置
background-repeat	背景图片如何填充
background-size	背景图片大小属性

background-color属性

设置背景颜色

background-image属性

元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认下background-image属性放置在元素的右上角，日过图像不够大会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分。

background-repeat属性

背景图像的平铺方式

值	说明
repeat	默认值
repeat-x	只向水平方向平铺
repeat-y	只向垂直方向平铺
no-repeat	不平铺

background-size

背景图像的大小

值	说明
length	设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只设置一个，第二个值auto
percentage	计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只设置一个，第二个值auto
cover	让图片保持纵横比并将图片缩放成完全覆盖背景区域的最小大小
contain	让图片保持纵横比并将图片缩放成合适背景定位区域的最小大小

backgroud-position属性

设置背景图像的起始位置，默认值：0% 0%

左：left

右：right

上：top

下：bottom

（可组合左上、左下、右上、右下）

x% y%：第一个值是水平位置，第二个是垂直位置。左上角是0% 0%，右下角是100% 100%。如果只制定了一个值，其他默认是50%

xpos ypos：单位是像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            background-color: aqua;
            width: 2000px;;
            height: 1000px;
            background-image:url(../../HTML/超文本链接/p2831307612.jpg);
            background-repeat: repeat-x;
            background-size: 50%;
        }
        .box2{
            background-color: lightsalmon;
            width: 2000px;;
            height: 1000px;
            background-image:url(../../HTML/超文本链接/p2831307612.jpg);
            background-repeat: no-repeat;
            background-size: 50%;
            
            background-position: 30%;
        }
        
    </style>
</head>
<body>

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

</body>
</html>