有时候会遇到使用背景图还是图片的问题。
- 背景图:固定不变的内容,需要使用div标签来包裹内容
- 图片:img 标签的 src 属性值时后端给的。一般用于可变的(如头像),可点击的。
一般来说,使用到背景图片,会涉及到如下 CSS 样式:
- background-image: url();/背景图的路径/
- background-position: left top | center;/偏移位置/
- background-size: contain | cover | width height;/背景图尺寸/
cover:图片完全覆盖容器(图片可能溢出)。
contain:容器包裹图片(图片可能无法完全覆盖容器)。
background-size: 100px 80px;背景图宽度100px,高度80px - background-repeat: no-repeat | repeat-x | repeat-y;/背景图重复性/
- background-attachment: fixed | scroll; 规定背景图像是否固定或者随着页面的其余部分滚动。