任务4CSS3中的图片和背景课件.pptxVIP

时 □ * % 血 愈 (p) 贮 项目2 任务4 CSS3 中的图片和背景 8.1 背景相关属性 background background-attachment background-color background-image background-position background-repeat style type=text/css body {background -color : yellow] h1 {background-color : #00ff00 } h2 {background-color : transparent p.p1 {background-color: rgb(250,0,255)} /style /head body ) h1 这是标题1/h1 h2 这 是 标 题 2 /h2 p class=p1这是段落/p /body 这 是 标 题 1 这是标题2 这是段 落 style type=text/css body background-image: □ background repeat.htm × C file:///D:/移动web 应用开发/教学课件/第二部分%20%20CSS/ 背景边相 /style /head body /body url(image.gif); background-image: url(image5. jpg); background-attachment : scroll ; /style background-image: background-repeat /style /head body /body style style type=text/css url(image.gif); : repeat-Y ; type=text/css body body 外补丁区margin 边框区border 内补丁区padding 内容区content 8.1.2 CSS3新增 测试 background-clip background-origin background-position background-size background-image:url(wjc.gif);background-clip:content-box; div style=background-image:url(wjc.gif);background-origin:content; -webkit-background-origin:content;background-repeat:no-repeat; 测试文字/div) !--背景图片从内补丁区开始覆盖-- background-image:url(wjc.gif);background-origin:padding; div style=background-image:url(wjc.gif);background-origin:padding -webkit-background-origin:padding;background-repeat:no-repeat; 测试文字/div) !--背景图片从边框区开始覆盖-- background-image:url(wjc.gif);background-origin:border; div style=background-image:url(wjc.gif);background-origin:border -webkit-background-origin:border;background-repeat:no-repeat; 测试文字/div / * 为div 元素增加边框*/ div{ border:10px dotted #444 padding:12px; height: 30px; width: 200px; /st