CSS的背景属性

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）