码迷,mamicode.com
首页 > Web开发 > 详细

第96天:CSS3 背景详解

时间:2017-11-27 00:08:37      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:默认   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参数
  • 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         }

 

 

第96天:CSS3 背景详解

标签:默认   add   jpg   tom   参数   auto   背景   ott   no-repeat   

原文地址:http://www.cnblogs.com/le220/p/7900861.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!