🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
含义: 背景是指在盒子结构中,衬托在边框线范围以内的背景颜色或背景图。 可以设置背景颜色,或背景图,或同时设置。其中背景图有多项参数可设置。 主要的背景属性设置有: 设置背景颜色: ``` background-color:yellow; ``` 设置背景图: ``` background-image:url(图片路径); //注意,图片路径是相对于当前网页或css文件(对外部样式来说) ``` 设置背景图的位置(有背景图的前提下有效) ``` background-position:水平位置 [,垂直位置]; ``` 说明: 1,如果不设置该属性,默认值为“0,0”,即在盒子的左上角。 2,可以设置1个值或2个值;设置1个值的时候,第二个默认为center(居中)。 3,水平位置:可以设置为长度值,或百分比,或以下固定值:left/center/right。 4,垂直位置:可以设置为长度值,或百分比,或以下固定值:/top/center/bottom 设置背景图是否重复(有背景图的前提下有效): ``` background-repeat:属性值1 [,属性值2]; //有以下几个属性值可用: repeat: 重复,默认值; no-repeat: 不重复; repeat-x: 只在x方向重复; repeat-y: 只在y方向重复; ``` 背景综合属性background: 可以同时设置上述几个有关背景的属性,相互之间用空格隔开,比如: ``` background:yellow; 只设置背景颜色; background:yellow url(./images/bg.jpg) no-repeat; background:yellow url(./images/bg.jpg) repeat-y lelft top; background:yellow url(‘/images.bg.jpg) repeat no-repeat 5px 10px; ``` 示例: ![](https://img.kancloud.cn/8a/e3/8ae3201dc928acb471e4d430bbe81048_790x509.png) 背景图的经典应用: 用一个背景图,在“分配”到若干个小的盒子中! ![](https://img.kancloud.cn/45/cd/45cdcaa6a46ae45e553d0736a2cb98f3_450x170.png) ![](https://img.kancloud.cn/21/19/2119a44a9229f5e0aba08d944392a80f_702x597.png) 效果如下: ![](https://img.kancloud.cn/88/dd/88dd96759ce387bb6d58e5387f626892_237x270.png)