1.背景图基本设置
background-image: url("/i/photo/tree.png"); /*背景图片*/
background-size: 100px;/*背景图尺寸*/
margin-right: 200px; /*背景图片边距*/
background-attachment: fixed; /*背景图片固定悬浮*/| background-size: 100px; | 背景图尺寸 |
|---|---|
| background-size: cover； | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 |
| background-size: contain； | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
2.背景图平铺
| background-repeat: no-repeat; | 背景图片平铺 |
|---|---|
| background-repeat: repeat; | 不设置时-默认平铺 |
| background-repeat: no-repeat; | 不平铺 |
| background-repeat: repeat-x; | X轴平铺 |
| background-repeat: repeat-y; | y轴平铺 |
| background-repeat: round ; | 自动缩放填满容器 |
| background-repeat: space ; | 背景图像以相同的间距平铺且填充满整个容器或某个方向 |
| background-repeat: inherit; | 指定 background-repeat 属性设置应该从父元素继承 |
3.背景图位置
| background-position: center; | 背景图片位置- 右上 |
|---|---|
| top left （如果仅规定了一个关键词，那么第二个值将是"center"。） top center top right center left center center center right bottom left bottom center bottom right |
发表评论