CSS中的background
属性用于设置元素的背景样式,包括背景颜色、背景图片、背景大小、背景定位等。
-
背景颜色 (
background-color
): 用于设置元素的背景颜色。- 语法:
background-color: <color>;
- 示例:
background-color: red;
- 语法:
-
背景图片 (
background-image
): 用于设置元素的背景图片。- 语法:
background-image: url(<image-url>);
- 示例:
background-image: url('image.jpg');
- 语法:
-
背景重复 (
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
- 语法:
-
背景大小 (
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 表示根据设置的宽或者高后,在图片原有的基础上,对应的高或者宽等比缩放
- 语法:
-
背景定位 (
background-position
): 用于设置背景图片的位置。- 语法:
background-position: <position-x> <position-y>;
- 示例:
background-position: center top;
- 语法:
-
背景附着 (
background-attachment
): 用于设置背景图片是否固定或随滚动而移动。- 语法:
background-attachment: scroll | fixed;
- 示例:
background-attachment: fixed;
- 语法:
-
多重背景 (
background-image
): 可以在一个元素上设置多个背景图片。- 语法:
background-image: url(<image-url>), url(<image-url>), ...;
- 示例:
background-image: url('image1.jpg'), url('image2.jpg');
- 语法: