介绍:
- background-size用于设置背景图片的尺寸,可以是具体长度值、百分比或cover、contain等关键字;
- background-repeat用于指定背景图片的平铺方式,包括repeat、repeat-x、repeat-y和no-repeat;
- background-position用于设置背景图片的起始位置,可以使用关键字(如top、center)或具体的长度值。这三种属性共同用于控制背景图片的显示效果,通过灵活组合可以实现各种各样的视觉效果。
起始代码:
xml
<!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>
起始结果:
我们可以看到由于div设置了宽高属性所以背景图片只显示了左上角。
1. background-size
可能的取值:
auto
:默认值,保持图片原始尺寸。<length>
:指定图片的宽度和高度,可以是像素值或百分比。cover
:等比例缩放图片,使其完全覆盖容器,并保持图片的纵横比。contain
:等比例缩放图片,使其完全包含在容器内,并保持图片的纵横比。
特点和实例:
auto
:保持图片原始尺寸,不进行缩放。
arduino
.example {
background-size: auto;
}
结果:背景图片只显示了左上角。
<length>
:设置图片的宽度和高度,可以使用像素值或百分比。
arduino
.example {
background-size: 200px 100px;
}
结果:因为给背景图设置了200px 100px的宽高,所以背景图会自己填充剩下的div空间
cover
:等比例缩放图片,使其完全覆盖容器,并保持图片的纵横比。
arduino
.example {
background-size: cover;
}
结果:背景图完全覆盖容器,并保持图片的纵横比。
contain
:等比例缩放图片,使其完全包含在容器内,并保持图片的纵横比。
arduino
.example {
background-size: contain;
}
结果:因为等比例填充div容器,所以可以看到剩下的空间也是被图片继续覆盖掉。
2. background-repeat
可能的取值:
repeat
:在水平和垂直方向上平铺图片,默认值。repeat-x
:在水平方向上平铺图片。repeat-y
:在垂直方向上平铺图片。no-repeat
:不平铺,只显示一次图片。
特点和实例:
repeat
:在水平和垂直方向上平铺图片,默认值。
css
.example {
background-repeat: repeat;
}
结果:为默认值,所以背景图结果也为起始结果(最开始的背景图展示)
repeat-x
:在水平方向上平铺图片。
arduino
.example {
background-size: 200px 100px;//方便展示图片的方向平铺结果
background-repeat: repeat-x;
}
结果:可以看到图片平铺在x轴(即水平方向上)
repeat-y
:在垂直方向上平铺图片。
arduino
.example {
background-size: 200px 100px;//方便展示图片的方向平铺结果
background-repeat: repeat-y;
}
结果:可以看到图片平铺在y轴(即垂直方向上)
no-repeat
:不平铺,只显示一次图片。
arduino
.example {
background-size: 200px 100px;//方便展示图片的方向平铺结果
background-repeat: no-repeat;
}
结果:可以看到图片只平铺一次)
3. background-position
可能的取值:
-
<position>
:用长度值、百分比值或关键字来描述背景图片的位置。- 关键字:top、bottom、left、right、center。
特点和实例:
<position>
:使用长度值、百分比值或关键字来描述背景图片的位置。
css
.example {
background-image: url('../image/赛博冷色.png');
background-repeat: no-repeat;
background-size: 200px 100px;
//以上三样式便于观察背景图所设置
background-position: 10px 20px;
}
结果:表示距离左边距10px,上边距20px
- 关键字:使用关键字来描述背景图片的位置。
css
.example {
background-image: url('../image/赛博冷色.png');
background-repeat: no-repeat;
background-size: 200px 100px;
//以上三样式便于观察背景图所设置
background-position: top center;
}
结果:表示位于顶部居中位置,其他同理。
希望这篇文章能够帮助到大家,如有错误也欢迎大家补充!