标签:默认 add jpg tom 参数 auto 背景 ott no-repeat
background: url("images/bg.jpg") no-repeat;
控制背景的大小
1、具体数值
background-size: 500px 500px;
2、百分比
background-size: 50% 50%;
3、cover、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 }
标签:默认 add jpg tom 参数 auto 背景 ott no-repeat
原文地址:http://www.cnblogs.com/le220/p/7900861.html