《HTM5培训背景属性.docxVIP

CSS-背景属性讲师：李南江背景的平铺属性!DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 title35-背景平铺属性/title style /* div{ width: 500px; height: 500px; } .box1{ background-image: url(images/girl.jpg); background-repeat: repeat-y; } */ /* body{ background-image: url(images/bg2.jpg); } */ div{ width: 980px; height: 60px; background-image: url(images/1.png); } /style/headbody!--1.如何控制背景图片的平铺方式?在CSS中有一个background-repeat属性, 就是专门用于控制背景图片的平铺方式的取值:repeat 默认, 在水平和垂直都需要平铺no-repeat 在水平和垂直都不需要平铺repeat-x 只在水平方向平铺repeat-y 只在垂直方向平铺快捷键bgr background-repeat:应用场景:可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度--div class=box1/div/body/html背景的定位属性!DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 title36-背景定位属性/title style div{ /*width: 500px;*/ height: 500px; } .box1{ /*background-color: red;*/ /*background-image: url(images/girl.jpg);*/ /*background-repeat: no-repeat;*/ /*background-position: left top;*/ /*background-position: right top;*/ /*background-position: right bottom;*/ /*background-position: left bottom;*/ /*background-position: center center;*/ /*background-position: left center;*/ /*background-position: center top;*/ /*background-position: 100px 0;*/ /*background-position: 100px 200px;*/ /*background-position: -100px -100px;*/ background-image: url(images/yxlm.jpg); background-position: center top; } /style/headbody!--1.如何控制背景图片的位置?在CSS中有一个叫做background-position:属性, 就是专门用于控制背景图片的位置2.格式:background-position: 水平方向 垂直方向;3.取值2.1具体的方位名词水平方向: left center right垂直方向: top center bottom2.2具体的像素例如: background-position: 100px 200px;记住一定要写单位, 也就是一定要写px记住具体的像素是可以接收负数的快捷键:bp background-position: 0 0;注意点:同一个标签可以同时设置背景颜色和背景