前端入门part11css之背景图片

背景颜色设置

background-color: #fff;

背景图片设置

• background-image: url();
• 其中：括号中既可以填写本地图片地址，也可以填写网络上地址；
• background-repeat: no-repeat;设置平铺样式；
• 其中：repeat 默认，在水平和竖直都平铺；
• no-repeat:在水平和竖直都不平铺；
• repeat-x:在水平方向平铺；
• repeat-y:在竖直方向平铺；

默认情况下图片都是在左上角向下铺的，如何控制图片位置呢？

• background-position: 0 0; 前面一个数是水平方向的，后面是竖直方向的
• 水平方向：left center right
• 竖直方向：top center bottom
• background-position: right bottom; 从右下角开始；
• background-position: 100px 0; 距离左边100px；可以取负值
• 特别常见的应用场景为：随着浏览器放大缩小，图片始终保持居中background-position: center 0;

默认情况下，背景图片会随着滚动条的滚动而滚动，可以修改背景条和滚动条的关联方式；

• background-attachment: fixed; 背景图片不随着滚动条滚动而滚动；

** 背景属性如何缩写？**

• background：颜色 图片 平铺方式 关联方式 定位方式；
• 注意：每一个属性都可以被忽略；

背景图片和插入图片有什么区别？

背景图片	插入图片
装饰作用不占位置	占位置
有定位属性，容易操控图片位置	没有定位属性，不容易操控位置