likes
comments
collection
share

关于background-size、background-repeat、background-position的三种属性详解

作者站长头像
站长
· 阅读数 16

介绍：

  • background-size用于设置背景图片的尺寸，可以是具体长度值、百分比或cover、contain等关键字；
  • background-repeat用于指定背景图片的平铺方式，包括repeat、repeat-x、repeat-y和no-repeat；
  • background-position用于设置背景图片的起始位置，可以使用关键字（如top、center）或具体的长度值。这三种属性共同用于控制背景图片的显示效果，通过灵活组合可以实现各种各样的视觉效果。

起始代码：

<!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设置宽高和红色边框便于观察
        div{
            width: 600px;
            height: 300px;
            border: 5px solid red;
        }
        .example {
            background-image: url('../image/赛博冷色.png');        
        }
    </style>
</head>
<body>
    <div class="example"></div>
</body>
</html>

起始结果：

关于background-size、background-repeat、background-position的三种属性详解

我们可以看到由于div设置了宽高属性所以背景图片只显示了左上角。

1. background-size

可能的取值：

  • auto：默认值，保持图片原始尺寸。
  • <length>：指定图片的宽度和高度，可以是像素值或百分比。
  • cover：等比例缩放图片，使其完全覆盖容器，并保持图片的纵横比。
  • contain：等比例缩放图片，使其完全包含在容器内，并保持图片的纵横比。

特点和实例：

  • auto：保持图片原始尺寸，不进行缩放。
.example {
  background-size: auto;
}
  • <length>：设置图片的宽度和高度，可以使用像素值或百分比。
.example {
  background-size: 200px 100px;
}

结果：因为给背景图设置了200px 100px的宽高，所以背景图会自己填充剩下的div空间

关于background-size、background-repeat、background-position的三种属性详解

  • cover：等比例缩放图片，使其完全覆盖容器，并保持图片的纵横比。
.example {
  background-size: cover;
}

结果：背景图完全覆盖容器，并保持图片的纵横比。

关于background-size、background-repeat、background-position的三种属性详解

  • contain：等比例缩放图片，使其完全包含在容器内，并保持图片的纵横比。
.example {
  background-size: contain;
}

结果：因为等比例填充div容器，所以可以看到剩下的空间也是被图片继续覆盖掉。

关于background-size、background-repeat、background-position的三种属性详解

2. background-repeat

可能的取值：

  • repeat：在水平和垂直方向上平铺图片，默认值。
  • repeat-x：在水平方向上平铺图片。
  • repeat-y：在垂直方向上平铺图片。
  • no-repeat：不平铺，只显示一次图片。

特点和实例：

  • repeat：在水平和垂直方向上平铺图片，默认值。
.example {
  background-repeat: repeat;
}

结果：为默认值，所以背景图结果也为起始结果（最开始的背景图展示）

  • repeat-x：在水平方向上平铺图片。
.example {
  background-size: 200px 100px;//方便展示图片的方向平铺结果
  background-repeat: repeat-x;
}

结果：可以看到图片平铺在x轴（即水平方向上）

关于background-size、background-repeat、background-position的三种属性详解

  • repeat-y：在垂直方向上平铺图片。
.example {
  background-size: 200px 100px;//方便展示图片的方向平铺结果
  background-repeat: repeat-y;
}

结果：可以看到图片平铺在y轴（即垂直方向上）

关于background-size、background-repeat、background-position的三种属性详解

  • no-repeat：不平铺，只显示一次图片。
.example {
  background-size: 200px 100px;//方便展示图片的方向平铺结果
  background-repeat: no-repeat;
}

结果：可以看到图片只平铺一次）

关于background-size、background-repeat、background-position的三种属性详解

3. background-position

可能的取值：

  • <position>：用长度值、百分比值或关键字来描述背景图片的位置。

    • 关键字：top、bottom、left、right、center。

特点和实例：

  • <position>：使用长度值、百分比值或关键字来描述背景图片的位置。
.example {
    background-image: url('../image/赛博冷色.png');
    background-repeat: no-repeat;
    background-size: 200px 100px; 
    //以上三样式便于观察背景图所设置
    background-position: 10px 20px; 
}

结果：表示距离左边距10px，上边距20px

关于background-size、background-repeat、background-position的三种属性详解

  • 关键字：使用关键字来描述背景图片的位置。
.example {
    background-image: url('../image/赛博冷色.png');
    background-repeat: no-repeat;
    background-size: 200px 100px;
    //以上三样式便于观察背景图所设置
    background-position: top center; 
}

结果：表示位于顶部居中位置，其他同理。

关于background-size、background-repeat、background-position的三种属性详解

希望这篇文章能够帮助到大家，如有错误也欢迎大家补充！