属性 | 描述 |
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>