《xg网页设计4-1.ppt》由会员分享，可在线阅读，更多相关《xg网页设计4-1.ppt（38页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第第4章章 背景图像效果背景图像效果背景图像基础背景图像基础圆角框圆角框背景图像基础background-color (transparent)background-imagebackground-repeatbackground-positionbackground-attachment预备 *margin:0;padding:0;body font-size:20px;padding:10px;另外设定：在body中放置一个ul元素。设置如下：1.没有项目符号；2.高和宽各500像素；3.水平居中；4.列表有1个像素宽的点状黑色边框；5.有10个像素的内边距；6.有背景图片：pic文件夹下
2、的greentea.jpgul中的li元素：背景为白色，行高为30像素。ul list-style:none;width:500px;height:500px;margin:0 auto;/自动自动调整左右margin间隔的距离以达到水平居中的效果。border:1px dotted black;padding:10px;background-image:url(pic/greentea.jpg)水平居中（1）div margin-left:auto;margin-right:auto;（2）margin:0 auto;在简写法中，如果调整 margin-top 或者 margin-botto
3、m，就会失去CSS居中的水平居中效果,所以最好还是按上一种写法比较好ul li background-color:white;line-height:30px;/*filter:alpha(opacity=70);*/*opacity:0.70;*/滤镜效果滤镜filter:alpha(opacity=70);/IE6以上版本所支持的语法，IE5以前不支持滤镜。opacity:0.70;/IE 目前不支持这个属性目前不支持这个属性，它属于CSS3规范。在火狐等浏览器中受到支持。ALPHA滤镜滤镜是设置对象透明度效果的滤镜filter：alpha（opacity=opacity值，值，finis
4、hopacity=finishopacity，style=style，startX=startX，startY=startY，finishX=finishX，finishY=finishY）Opacity代表透明度等级，可选值从代表透明度等级，可选值从0到到100，0代表完全透代表完全透明，明，100代表完全不透明。代表完全不透明。Finishopacity是一个可选项，用来设置结束时的透明度，是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从从而达到一种渐变效果，它的值也是从0到到100。StartX和和StartY代表渐变透明效果的开始坐标。代表渐变透明效果的开始坐标
5、。finishX和和finishY代表渐变透明效果的结束坐标。代表渐变透明效果的结束坐标。Style参数指定了透明区域的形状特征。参数指定了透明区域的形状特征。1:线性渐变透明度。从由线性渐变透明度。从由 StartX 和和 StartY 决决定的点，由定的点，由 Opacity 决定的透明度开始，到由决定的透明度开始，到由 FinishX 和和 FinishY 决定的点，由决定的点，由 FinishOpacity 决定的透明度结束。决定的透明度结束。2:圆形放射渐变透明度。圆形放射区域的圆心为圆形放射渐变透明度。圆形放射区域的圆心为对象的中心，圆周到与对象的边相切为止。透明渐变对象的中心，圆
6、周到与对象的边相切为止。透明渐变由圆心开始，到圆周结束。开始透明度和结束透明度由圆心开始，到圆周结束。开始透明度和结束透明度同上。同上。3:矩形放射渐变透明度。由对象的边开始，到对矩形放射渐变透明度。由对象的边开始，到对象的中心结束。开始透明度和结束透明度同上。象的中心结束。开始透明度和结束透明度同上。设置STYLE前后效果对比img filter:alpha(opacity=70,style=2);说明：滤镜能节省带 宽，而且能在制作奇妙的视觉设计时使用文字格式，而不必先制作庞大的文字位图以取得相同的效果。但由于这些功能尚未成为HTML的正式组成部分，所以并不是所有的浏览器都能看到这些特色。
7、BACKGROUND-REPEAT 与BACKGROUND-POSITIONbackground-image:url(pic/abird.png);background-repeat:repeat-y;background-position:center;BACKGROUND-POSITION设置或检索对象的背景图像位置。必须先指定设置或检索对象的背景图像位置。必须先指定 background-image 属性。属性。background-position:position|position background-position:length|length 下面的两组设置，是否有区别back
8、ground-position:center center;background-position:center;background-position:left top;background-position:top left;BACKGROUND-POSITION:LENGTH|LENGTH该属性定位不受对象的补丁属性该属性定位不受对象的补丁属性(padding)设置影设置影响。响。默认值为：默认值为：0%0%。此时背景图片将被定位于对象。此时背景图片将被定位于对象不包括补丁不包括补丁(padding)的内容区域的左上角。的内容区域的左上角。如果只指定了一个值，该值将用于横坐标。纵坐标将如
9、果只指定了一个值，该值将用于横坐标。纵坐标将默认为默认为 50%。如果指定了两个值，第二个值将用于。如果指定了两个值，第二个值将用于纵坐标。纵坐标。如图效果应该如何设置“POSITION”background-position:20%80%;如下设置的效果是？background-position:80%;小结也可以采用也可以采用px等绝对单位来设置等绝对单位来设置以上的设置方式还可以结合使用，如百分比和像素，以上的设置方式还可以结合使用，如百分比和像素，像素和单词，等等。如：像素和单词，等等。如：20%，left；80%，left；思考：是怎样的效果？思考：是怎样的效果？在有的工具中，如在有
10、的工具中，如Editplus，会有所不同，都靠左，会有所不同，都靠左边框，但是垂直位置不同。边框，但是垂直位置不同。但在但在IE6以上以及火狐等浏览器中，都在左上角。以上以及火狐等浏览器中，都在左上角。BACKGROUND-ATTACHMENTbackground-attachment:scroll|fixed 取值：scroll:默认值。背景图像是随对象内容滚动默认值。背景图像是随对象内容滚动 fixed:背景图像固定在窗口的某一位置，不随着背景图像固定在窗口的某一位置，不随着对象的滚动而消失于浏览器窗口。对象的滚动而消失于浏览器窗口。示例：body font-size:20px;paddi
11、ng:10px;background:url(pic/blue.jpg)no-repeat fixed;ul list-style:none;width:300px;height:1000px;圆角框-固定宽度的圆角框Simple,Fixed Rounded Corner Box Lorem IpsumLorem ipsum dolor sit amet,consectetuer adipiscing elit.Proin venenatis turpis ut quam.In dolor.Nam ultrices nisl sollicitudin sapien.Ut lacinia ali
12、quet ante.素材 top.gif 和 bottom.gif实现：*padding:0;margin:0;body margin:0 auto;h2 color:#94b767;pmargin-bottom:1.385em;圆角框的实现：.box width:418px;background:#effce7 url(pic/bottom.gif)no-repeat left bottom;padding-bottom:1px;.box h2 background:url(pic/top.gif)no-repeat left top;margin-top:0;padding:20px 20
13、px 0 20px;.box p padding:0 20px;圆角框2Fixed Rounded Corner Box ExampleLorem IpsumLorem ipsum dolor sit amet,consectetuer adipiscing elit.Proin venenatis turpis ut quam.In dolor.Nam ultrices nisl sollicitudin sapien.Ut lacinia aliquet ante.素材-top2.gif -no-repeat left toptitle2.gif -repeat-ybottom2.gif
14、-no-repeat left bottom实现方法.box width:424px;background:url(img/tile2.gif)repeat-y;.box h2 background:url(img/top2.gif)no-repeat left top;padding-top:20px;.box.last background:url(img/bottom2.gif)no-repeat left bottom;padding-bottom:20px;灵活的圆角框Flexible Rounded Corner Box Example Lorem Ipsum Lorem ipsu
15、m dolor sit amet,consectetuer 素材.box width:20em;background:url(img/bottom-left.gif)no-repeat left bottom;.box-outer background:url(img/bottom-right.gif)no-repeat right bottom;padding-bottom:1px;.box-inner background:url(img/top-left.gif)no-repeat left top;.box h2 background:url(img/top-right.gif)no-
16、repeat right top;padding-top:1em;.box h2,.box p padding-left:1em;padding-right:1em;BORDER-RADIUSCSS3所支持的属性所支持的属性,没有得到广泛支持。没有得到广泛支持。Firefox支持这个属性，但要加上支持这个属性，但要加上-moz-前缀前缀.box border:1px solid black;-moz-border-radius:1em;width:500px;margin:0 auto;可以修改某个角的弧度-moz-border-radius-topright:1emSafari浏览器需要的前缀是：-webkit-webkit-border-radius-topright:1emhttp:/www.html.it/articoli/niftycube/index.html投影