背景的样式

CSS中的background属性用于设置元素的背景样式，包括背景颜色、背景图片、背景大小、背景定位等。

1. 背景颜色 (background-color): 用于设置元素的背景颜色。

   • 语法：

     background-color: <color>;

   • 示例：

     background-color: red;

2. 背景图片 (background-image): 用于设置元素的背景图片。

   • 语法：

     background-image: url(<image-url>);

   • 示例：

     background-image: url('image.jpg');

3. 背景重复 (background-repeat): 用于设置背景图片的重复方式。

   • 语法：

     background-repeat: repeat-x | repeat-y | no-repeat | repeat;

   • 示例：

     background-repeat: no-repeat;
     background-repeat-x:repeat;
     background-repeat-y:no-repeat; 
     			

     背景图片是否需要平铺/重复一个复合属性，分别是水平方向和竖直方向，平铺repeat;
     不平铺no-repeat

4. 背景大小 (background-size): 用于设置背景图片的大小。

   • 语法：

     background-size: auto | cover | contain | <length> | <percentage>;

   • 示例：

     background-size: cover;
     background-size:400px 400px;
     background-size:100% 100%;
     background-size: 50% auto; 
     			

     背景图片的尺寸
     1.两个属性值分别是宽和高
     2.写法可以是：①具体的像素值 400px 400px
     ②相对容器尺寸的百分数 100%  50%
     ③auto 表示根据设置的宽或者高后，在图片原有的基础上，对应的高或者宽等比缩放

5. 背景定位 (background-position): 用于设置背景图片的位置。

   • 语法：

     background-position: <position-x> <position-y>;

   • 示例：

     background-position: center top;

6. 背景附着 (background-attachment): 用于设置背景图片是否固定或随滚动而移动。

   • 语法：

     background-attachment: scroll | fixed;

   • 示例：

     background-attachment: fixed;

7. 多重背景 (background-image): 可以在一个元素上设置多个背景图片。

   • 语法：

     background-image: url(<image-url>), url(<image-url>), ...;

   • 示例：

     background-image: url('image1.jpg'), url('image2.jpg');