css样式之背景课件.pptxVIP

;一、控制背景样式：;背景颜色 P{Background-color:#ff0066;} P{Background-color:red;} P{Background-color:rgb(255,255,0);} P{Background-image:url(images/a.jpg);} 支持多背景图片 P{Background-image:url(images/a.jpg), url(images/b.jpg);} div{ background-image:url(img/img25.jpg),url(img/img26.jpg); background-repeat:no-repeat,repeat-x; background-position:3% 50%,center center;} 是否重复 p{ background-repeat:no-repeat;} 综合应用 p{ background:#666 url(img/img25.jpg) no-repeat scroll left top;} ; 补充属性 ：;指定背景的范围：background-clip 一个具有背景的元素通常由元素的内容、内部补白、 边框、外部补白构成，如图所示。 在CSS2中，背景的显示范围是指内部补白之内的范围， 不包括边框；在CSS3中，背景的显示范围是指包括边框 在内的范围。CSS3可以用background-clip属性 调整背景的显示范围。 div{ width:200px; height:200px; background-color:#F00; border:5px #000000 solid; background-clip:border-box; -moz-background-clip:border-box; -webkit-background-clip:border-box; } Firefox:以-moz-识别 Google chrome/safari:以-webkit-识别 Opera:以-o-识别 IE 9+:以-ms-识别 ;指定背景的位置：Background-position div{ background-image:url(img/img25.jpg); background-position:20px 50px;} div{ background-image:url(img/img25.jpg); background-position:20px 50%;} div{ background-image:url(img/img25.jpg); background-position:50% 50%;} div{ background-image:url(img/img25.jpg); background-position: left center;};指定背景的尺寸：Background-size background-size:60px 80px; background-size:auto 20px; background-size: cover(contain); 未设置Background-size Background-siz：100% 100% ;设置背景原点：Background-origin div{ -moz-background-origin:border; -webkit-background-origin:border; } div{ -moz-background-origin: padding; -webkit-background-origin: padding; } div{ -moz-background-origin: content; -webkit-background-origin: content; } ;;;;;