css3background
background是⼀个很重要的css属性，在css3中新增了很多内容。⼀⽅⾯是原有属性新增了属性值，另⼀⽅⾯就是新增了3个属性。
⼀、css3中新增属性值介绍
css2的background有5个属性，缩写如下：
background:background-color,background-image,background-repeat ,background-attachment, background-position;
其中background-image,background-repeat和background-position在css3中都增加了新的属性值。
1、background-image
css3中background-image可以设置多个背景图⽚，⽤法：background-image:url(),url()。
对于多重背景图需要注意以下⼏点：
a、背景图顺序
背景图以层的形式显⽰，多个背景图从上往下分布，第⼀个背景图在最顶层，所以添加多个背景图需要注意顺序以及图⽚透明度。
举例：
两个div的背景图⼀样，顺序相反。
<style>
div{
width: 200px;
height: 200px;
border: 5px dotted pink;
background-repeat: no-repeat;
display: inline-block;
}
.bg{
background-image: url(img/bg_flower.gif),url(img/bg_flower_2.gif);
}
.bg2{
background-image: url(img/bg_flower_2.gif),url(img/bg_flower.gif);
}
</style>
</head>
<body>
<p>两张背景图：尺⼨⼀样，第⼀张透明，第⼆张不透明<p>
<img src="img/bg_flower.gif"/><img  src="img/bg_flower_2.gif"/>
<div class="bg">
</div>
<div class="bg2">
</div>
</body>
View Code
分析：因为背景图以层的形式显⽰，第⼀个添加的在最上层。所以上左图中第⼀个背景图在上且透明就可以产⽣很漂亮的重叠效果，第⼆个因为不透明的背景图在上就覆盖了第⼆个图⽚，所以看不到下⾯的图⽚。
这点和box-shadow很相似。⼀个box有多重阴影时，多个阴影从上往下分布，第⼀个阴影在最顶层。了解更多可参考
b、语法缩写
⽤'，'隔开每组background的缩写值；如果有 size 值，需要紧跟 position 并且⽤ "/" 隔开；
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... Note：缩写时必须把background-color设置在最底层，才能⽣效。如果将background-color添加到其他层，语法错误整个规则都被忽略，不会显⽰。
举例：
<style>
div{
width: 200px;
height: 200px;
border: 5px dotted pink;
display: inline-block;
}
.bg3{
background: url(img/bg_flower.gif) no-repeat,url(img/bg_flower_2.gif) no-repeat blue;
}
.bg4{
background: url(img/bg_flower.gif) no-repeat yellow,url(img/bg_flower_2.gif) no-repeat blue;
}
</style>
</head>
<p>两张背景图：尺⼨⼀样，第⼀张透明，第⼆张不透明<p>
<img src="img/bg_flower.gif"/><img  src="img/bg_flower_2.gif"/>
<div class="bg3"></div>
<div class="bg42"></div>
</body>
View Code
分析：上图左⼀，background-color写在最底层，⽣效。左⼆中，给第⼀层加了⼀个background-color:yellow；整个规则⽆效。
c、拆分写法
或者将缩写拆分开写：如果有多个背景图⽚，⽽其他属性只有⼀个（例如 background-repeat 只有⼀个），表明所有背景图⽚应⽤该属性值；同样background-color只能设置⼀个。
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;
d、背景图和渐变
渐变⽤法是这样：background-image:linear-gradient(...)；可见渐变是背景图的⼀种特例，即⽤代码⽣成了⼀张背景图。了解更多渐变可参考
既然渐变也是背景图，在多重背景的时候当然可以⽤了。
.bg5{
background: url(img/bg_flower.gif) no-repeat,linear-gradient(to right,red ,green,blue) no-repeat;
}
<div class="bg5"></div>
总体来说，css3中新增的多重背景图，选择好的图⽚，使⽤得当可以出奇制胜，达到意想不到的效果。
2、background-repeat
对应背景图的平铺，必须说明⼀点：默认情况，背景图在x轴和y轴平铺，尽管起始于padding-box左上⾓，但是其各个⽅向朝外平铺，延伸到border区域。这点很重要，在下⾯时也要说到。
a、css3增加到2个属性值
css3中，可以使⽤两个repeat代替⼀个值。第⼀个为x轴，第⼆个为y轴。⽐如background-repeat: repeat no-repeat；和background-repeat: repeat-x；等价。css2中背景图的重复⽅式只有repeat，repeat效果就像贴瓷砖⼀样，如果不能整数个整好放置，超出部分就被裁剪掉了。css3新增了space和round属性值，在repeat基础上对重复的过程做到更好的把控，尽善尽美。
b、css3新增属性值space
将背景图在⽔平和垂直⽅向平铺且不裁剪。两端对齐，中间填补空⽩，背景图⼤⼩不变。
c、css3新增属性值round
将背景图在⽔平和垂直⽅向平铺且不裁剪。但是背景图⽚可能被拉伸或缩短。
repeat，space和round对⽐举例：
本来想个合适的⼩点的图⽚，没到，那就拿⽂章后⾯资源链接⾥⼀个背景图来举例好了。
原作者的例⼦在。
就是这只⽺，原图信息：
好⼤⼀只⽺，我在做demo时设置了background-size:100px 100px，这个属性会介绍。
代码：
<style>
div{
width: 240px;
height: 240px;
border: 1px solid pink;
display: inline-block;
background-image: url(img/sheep.png);
background-size: 100px 100px;
background-color: green;
color: red;
}
background-repeat: repeat;
}
.space{
background-repeat: space;
}
.round{
background-repeat: round;
}
.round1{
background-repeat: round;
width:250px;
}
</style>
<body>
<div class="repeat">repeat</div>
<div class="space">space</div>
<div class="round">round四舍</div>
<div class="round1">round五⼊</div>
</body>
效果：
分析：
⾸先，我设定div的尺⼨为240px*24px,img的尺⼨为100px*100px。
repeat的情况，背景图从左上⾓开始沿着x轴和y轴平铺，背景图⼤⼩不变，多余被裁剪，如上图左1。
space的情况，240/100=2.4，放不下3个图，因为space不裁剪，所以向下取整为2，所以x和y轴都有2张背景图，且两端对齐，其余空间空⽩，如上图左2。
round的情况，round这个词很有意思，它有四舍五⼊的意思。round(240/100)=round(2.4)=2，所以就容纳2张图⽚，图⽚尺⼨放⼤，如上图右2。
如果设定div宽度为250，round(250/100)=round(2.5)=3，所以就容纳3张图⽚，图⽚被缩⼩，如上图右1。
3、background-position
css2中背景只能从左上⾓定位，css3的background-position增加到四个属性值，可以对四个⾓都进⾏定位，⽽且可以取负值。
background-position取值的关键字有：top left center right bottom
按照取值个数举例来说⼀下：
a、⼀个参数
background-position: top；仅给定⼀个值，那么第⼆个值将是"center"。
注意⼀个问题：给⼀个值，并不⼀定是设置background-position-x，要根据参数定。left center right⾃然是设置x轴，top center bottom是对应y轴。
b、两个参数
background-position:x% y%|x pos y pos|center center。
第⼀个设置x轴偏移，第⼆个设置y轴偏移，没什么好说的。
c、三个参数
Note：设置3个或4个参数值时，偏移量前⾯必须有关键字。就是说形如："10px bottom 20px" ，是错误的，因为10px前⾯没有关键字。
上background-position: 0px 0px, center；这样的写法显然是错误的。
background-position: right 10px top；设置，⽔平靠右10px，垂直top。
d、四个参数
background-position:right 10px bottom 10px；设置靠右下⾓⽔平垂直10px定位。
⼆、css3中新增属性介绍
css3中background新增了3个属性:background-origin,background-clip和background-size。
1、background-origin
background-origin⽤来指定背景图⽚定位在哪个盒⼦中。
个⼈观点：background-origin是background-position的特例。都是表⽰背景图放哪，background-origin特殊点，决定背景图定位在哪个盒⼦中，相当于快速定位，你可以先通过background-origin定位到盒⼦，再通过background-position进⾏微调。
语法：
background-origin ： border-box | padding-box | content-box;
默认值：padding-box；
设置背景图⽚原始起点位置，没什么好说的，只是有⼏点需要注意：
a、repeat和origin关系
如果背景不是no-repeat，这个属性⽆效，它会从边框开始显⽰。这句话是总结的，我得吐槽⼀下，背景repeat这个属性是还是有效的。请看下⾯例⼦。<style type="text/css">
div{
color: white;
width: 100px;
height: 100px;
border: 20px  dotted pink;
padding:50px;
background-color: yellow;
background-image: url(img/wl.jpg) ;
display: inline-block;
vertical-align: top;
}
.
origin-content{
background-origin: content-box;
}
.nopeat{
background-repeat: no-repeat;
}
</style>
<body>
<div></div>
<div class="origin-content nopeat">origin-content nopeat</div>
<div class="origin-content">origin-content</div>
htmlborder</body>
分析：可见设置repeat时，先通过origin确定图⽚位置，然后向各个⽅向朝外平铺，延伸到border区域。在上⾯时就说了：对于背景图的平铺，默认情况，背景图在x轴和y轴平铺，尽管起始于padding-box左上⾓，但是其各个⽅向朝外平铺，延伸到border区域。现在origin只是改变了起始位置，
b、fixed和origin关系
如果background-attachment属性设置为"fixed"，background-origin将不起作⽤。
这个很好理解，因为fixed是相对于视⼝定位的，⼀个⽹页只有⼀个视⼝，如果不理解请看
2、background-clip
背景区域中背景图⽚裁剪的位置。
语法：
background-clip ： border-box | padding-box | content-box | no-clip;
默认值：border-box。
如果理解⽐较抽象，就关注背景颜⾊，如果background-clip为content，背景颜⾊就不会填充padding和border，因为被裁剪掉了。
<style type="text/css">
p {
border: 10px navy;
border-style: dotted double;
margin: 1em;
padding: 1em;
background: #F8D575;
}
.bb{
background-clip: border-box;
}
.pb{
background-clip: padding-box;
}
.cb{
background-clip: content-box;
}
</style>
<body>
<p class="bb">内容background-clip: border-box;</p>
<p class="pb">内容background-clip: padding-box;</p>
<p class="cb">内容background-clip: content-box;</p>
</body>
View Code
3、background-size
css3新增了background-size允许背景图被拉伸或者压扁。在响应式设计⾥很有⽤。
语法：
background-size: auto | <；长度值> | <；百分⽐> | cover | contain
参数：
auto：默认值，不改变背景图⽚的原始⾼度和宽度。
<；长度值>：成对出现如200px 50px，将背景图⽚宽⾼依次设置为前⾯两个值；当设置⼀个值时，将其作为图⽚宽度值，⾼度被设置为"auto"，且⾼度等⽐缩放。
<；百分⽐>：0%~100%之间的任意值，将背景图⽚宽⾼依次设置为所在元素宽⾼【并不是图⽚默认的宽⾼】乘以前⾯百分⽐得出的数值，⼀个值时，⾼度等⽐缩放。
经常⽤下⾯代码在⽹站中适应全屏幕背景。
body {
background: url(image.jpg) no-repeat;
background-size: 100%;
}
cover：覆盖，将背景图⽚等⽐缩放以填满整个容器。类似桌⾯背景中的平铺。就是把图⽚按⽐例扩展⾄⾜够⼤，以使背景铺满盒⼦，如果图⽚和容器的长宽⽐不同的话，背景图像的某些部分可能⽆法显⽰出来。
contain：容纳，即将背景图⽚等⽐缩放⾄容器的宽或⾼被填充满。有可能把图像放⼤后，依然铺不满盒⼦。
⽹上很多cover和contain的例⼦，但是讲的很不明⽩。下⾯我举个例⼦说明⼀下。
对⽐cover和contain举例：
<style>
div{
width: 150px;
height: 60px;
border: 1px solid pink;
display: inline-block;
background-image: url(img/bg.png);
background-color: green;
vertical-align: top;
background-repeat: no-repeat;
}
.cover{
background-size: cover;
}
.contain{
background-size: contain;
}
</style>
<body>
<img src="img/bg.png">原始图⽚尺⼨：100px*50px
<br/><br/><div class="cover"></div>div尺⼨：150px*60px;
<div ></div>cover对应图⽚尺⼨：150px*75px;
<br/><br/><div class="contain"></div>div尺⼨：150px*60px;
<div ></div>contain对应图⽚尺⼨：120px*60px;
<h3>背景图⽚⼤⼩计算⽅法：</h3>
<h4>即cover和contain等⽐缩放⽐例的计算：</h4>
<p>150/100=1.5;60/50=1.2</p>
<p>cover取⼤，放⼤1.5倍。width:150px;height:75px;</p>
<p>contain取⼩，放⼤1.2倍。width:120px;height:60px;</p>
</body>
View Code
所以我个⼈觉得在使⽤cover和contain时把握住本质就是确定缩放⽐例，⽽不要去记忆那些复杂的规则。
三、资源链接

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。