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)