background-colcor属性

设置背景颜色

 width: 200px;height: 200px;background-color: aqua;

background-image属性

设置元素的背景图像

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

 width: 200px;height: 200px;background-image: url("20240917214642.png");

 

background-repeat属性 

设置背景图像的平铺方式

repeat: 默认值

repeat-x: 只向水平方向平铺

repeat-y：只想垂直方向平铺

no-repeat: 不平铺
 

  div{margin: 10px;width: 100px;height: 100px;background-color: red;background-image: url("20240917214642.png")}#box1{background-repeat: repeat;}#box2{background-repeat: repeat-x;}#box3{background-repeat: repeat-y;}#box4{background-repeat: no-repeat;}

background-size属性 

设置背景图像的大小

length: 设置背景图片的宽度和高度，第一个值为宽度，第二个值为高度，如果只设置一个值，则另一个值为auto。

percenbtage: 设置计算新颖位置区域的百分比，第一个为宽，第二个值为高，如果只设置一个值，则另一个值为auto。

cover: 保持图片横纵比并将图片缩放成完全覆盖背景区域的最大或最小。

contain: 保持图片横纵比并将图片缩放成适合背景定位区域的最大或最小。

div{margin: 10px;width: 100px;height: 100px;background-color: red;background-image: url("20240917214642.png")}#box1{background-size: 50px 50px;}#box2{background-size: 50% 50%;}#box3{background-size: cover;}#box4{background-size: contain;}

background-position属性

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

left top :左上角

letf center:左中

left bottom:左下

right top:右上

righht center:右中

right bottom:右下

center top:中上

center center:中间

center bottom:中下

x% y%:第一个值为水平位置，第二值为垂直位置

xpos ypos:第一个值为水平位置，第二值为垂直位置（单位px）