背景颜色 background-color
默认背景是透明的
语法
/* 十六进制颜色 */ background-color: #00FFFF; /* rgb颜色 */ background-color: rgb(255,99,71); /* rgba颜色 */ background-color: rgba(255,99,71,0.5);
背景图片 background-image
语法
url() 是必加的
background-image: url(./img/icon.png);
背景平铺 background-repeat
语法
background-repeat: no-repeat;
| 值 | 描述 |
|---|---|
| repeat | 背景图片 纵向 横向 铺满整个屏幕（默认） |
| no-repeat | 不平铺 |
| repeat-x | x 轴平铺 |
| repeat-y | y 轴平铺 |
背景位置 background-position
语法
如果后面的位置 只写一个 则
另一个默认居中。
/* 底部靠左 */ background-position: bottom left; /* 表示 x轴 y轴，0,0 在背景容器左上角 */ background-position: 10px 20px;
| 值 | 描述 |
|---|---|
| length | 百分数、浮点数、px …都可以 |
| position | top、center、bottom、right、left 方位名词 |
背景附着 background-attachment
语法
background-attachment: scroll;
| 值 | 描述 |
|---|---|
| scroll | 背景会随对象内容滚动 |
| fixed | 背景图像固定 |
背景简写 background
语法
官方对背景简写没有顺序规定，约定以下面顺序写。下列不写的，就会自动使用默认值。
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
背景透明
背景透明其实是用
颜色透明度实现的
background-color: rgba(0,0,0,1);
- 最后透明取值
[0~1]之间 - 注意是指：背景半透明，内容是不受影响的。