一、背景大小
background: url("images/bg.jpg") no-repeat;
控制背景的大小
1、具体数值
background-size: 500px 500px;
2、百分比
background-size: 50% 50%;
3、cover、contain参数
- cover 完全覆盖盒子,不一定全部显示
- background-size: cover;
- contain 背景图片最大化在盒子中等比显示,但不一定能铺满盒子
- background-size: contain;
二、全屏背景自适应
1 body{
2 background: url("images/2.jpg") no-repeat center;
3 /*background-size: 100% 100%;*/
4 background-size: cover;/*全屏背景自适应*/
5 }
三、背景原点
background-origin 背景原点 控制背景从什么地方开始显示
1 .box{
2 width: 500px;
3 height: 500px;
4 border:30px solid rgba(0,255,0,0.8);
5 padding: 30px;
6 background: url(images/bg.jpg) no-repeat ;
7 /*背景原点 控制背景从什么地方开始显示*/
8 /*background-origin: padding-box;默认值*/
9 /*background-origin: border-box;*//*盒子最外面开始*/
10 background-origin: content-box;/*盒子内容区域开始*/
11 }
四、添加多个背景
给盒子加多个背景,按照背景语法格式写,多个背景使用逗号隔开
1 .box{
2 width: 624px;
3 height: 416px;
4 border: 1px solid #000;
5 margin: 100px auto;
6 /*给盒子加多个背景,按照背景语法格式写,多个背景使用逗号隔开*/
7 background: url(images/bg1.png) no-repeat left top
8 ,url(images/bg2.png) no-repeat right top
9 ,url(images/bg3.png) no-repeat right bottom
10 ,url(images/bg4.png) no-repeat left bottom
11 ,url(images/bg5.png) no-repeat center;
12 }