css样式之背景课件.pptx
文本预览下载声明
;一、控制背景样式:;背景颜色
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;
}
;;;;;
显示全部