web前端-CSS3 background相关属性

background-size属性是设置背景图的显示方式, 有以下几个取值

1. 直接设置背景宽高值: background-size:100px 200px; 设置背景图宽100px, 高200px
2. background-size: 50% 100% 设置背景图的宽度是元素宽度的50%, 高度是元素高度的100%
3. background-size : auto 100px; 设置背景图的高度是100px, 宽度根据高度自动拉伸
4. background-size : 100px auto; 设置背景图的宽度是100px, 高度是根据宽度自动拉伸.
5. background-size : cover; 设置背景图拉伸至充满整个元素, 必须宽高都充满元素
6. background-size : contain; 设置背景图拉伸, 但是宽或者高其中一个充满即可.

background-origin 背景开始显示的位置

1. padding-box : 背景图片相对于内边距来定位显示 , 也是默认值
2. border-box : 背景图相对于边框来定位显示
3. content-box : 背景图相对于内容区域来定位显示