3. 编辑元素
背景
1. 进入背景
右键点击元素→样式→背景。
2. 参数设置
（1）常用参数
l 图片地址：需要添加的背景图片地址。
提示：相对于使用图片背景，请尽可能使用上下文菜单中的“渐变背景”来设置背景。
l 背景颜色：设置背景颜色。也可以在此处使用rgba设置透明度，例如：rgba(51, 51, 51, 0.4)，最后一位表示透明度（值为0-1），此透明度只影响背景，不影响背景中的其他元素。
l 尺寸：设置图片大小，第一个参数是图片的宽度，第二个参数是图片的高度。w，h的值：x%，数字（css单位，如px），两个值用空格隔开。也可以设为cover（保持图片本身的比例，完全覆盖设置区域）。
l 裁剪尺寸：裁剪尺寸可以控制图片清晰度，只能添数字。
l 位置：控制图片位于背景中的位置，第一个参数控制横向移动距离，第二个参数控制纵向移动距离，只有图片尺寸小于背景尺寸时才有效果。x，y的值：x%，数字（css单位，如px），两个值用空格隔开。也可设为left，right，top，bottom，center（下文实例讲解会详细解释该功能如何使用）。
l 不透明度：用0到1及其之间的数字表示透明度。默认填1，也就是正常状态，0是完全透明状态。此处设置的透明度属于设置<div>等元素的不透明度，属性是opacity，会将属性传承给其子元素，即会影响背景中的所有元素；rgba属于颜色本身的设置，透明度属于颜色的透明度，与元素无关。
（2）实例讲解：
为一段文字添加一个背景图片，然后设置参数如下，尺寸：70% 50%；位置：30% 20%，如下图：
以宽度为例（高度原理相同），红色线框为最大背景区，黄色图片宽度占背景宽度的70%，受“尺寸”控制；红色加粗线条为图片横向移动的距离，受“位置”控制，占总空白横宽（空白横宽=背景宽度-图片宽度）的30%，如下图：
（3） 滚动条移动时
l 伴随滚动：默认状态，图片和背景可以伴随滚动条滚动。
l 全局固定：背景图片不会随着滚动条移动而移动。
l 局部固定：背景会随着内容的滚动而滚动。
l 初始值：将目前状态设为初始值。
l 派生值：设为从父元素继承的值。
（3）图片重复方式
l 双向效果：图片沿横竖双向填满整个背景。
飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞
l 横向效果：图片横向填满背景宽。
飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技
l 竖向效果：图片竖向填满背景高。
飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技飞鹿科技
l 不重复：背景图像仅显示一次，如果填写图片位置，尽可能选不重复。
l 初始值：将目前状态设为初始值。
l 派生值：设为从父元素继承的值。
（4）图片左上角
“图片左上角位于”选项通过定位图片左上角位置，控制图片的位置。
l 边界盒左上角：背景图片左上角位于边界（border）外边缘左上角，效果如下图：
l 填充盒左上角：默认情况，背景图片左上角位于内边距（padding）外边缘左上角，效果如下图：
l 内容盒左上角：背景图像左上角位于内容框（content）左上角，效果如下图：
l 初始值：将目前状态设为初始值。
l 派生值：设为从父元素继承的值。
（5）裁剪图片
“裁剪图片到元素的”选项通过裁剪控制图片的大小。
l 边界盒：默认状态，背景会延伸至边界（border）的外边缘（但在Z排序中，背景在边界的下方）。效果如下：
l 填充盒：背景会延伸至内边距（padding）的外边缘。效果如下：
l 内容盒：背景填充至内容框（content）中。效果如下：
l 初始值：将目前状态设为初始值。
l 派生值：设为从父元素继承的值。