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 |
--end--