元素设置背景图片,图片在页面上的属性由,大小,位置,显示比例,是否移动,图片源构成。
图片的来源可以是本地路径,也可以是BASE64字符串,具体信息如下。
.bg{width: 200px;height: 2000px;background-color: #7e8c8d;background-image: url("../../images/star.png");/*背景重复no-repeat 不重复repeat 重复repeat-y y轴重复repeat-x x轴重复*/background-repeat: no-repeat;/*背景图片位置left center 代表左中,其他同理10px 10px 代表偏移量,一个水平,一个垂直。*/background-position: center center;/*设置背景的范围,两个配合使用border-box 会出现在边框的下面padding-box 只会出现在内容区和内边距content-box 只会出现在内容区background-origin 背景图片的原点*/background-clip: content-box;background-origin: content-box;/*设置图片大小第一个代表宽度,第二个代表高度只写第一个,第二个不写会等比例进行缩放,默认值为auto第一个写auto,第二个写同理cover 图片比例不变,将元素填满contain 图片比例不变,在元素中显示完整*/background-size: 200px 200px;/*元素背景元素是否跟随滚动scroll 默认值,跟随滚动fixed 固定,不移动*/background-attachment: fixed;