网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS背景属性.pptx

网页背景是网页设计的重要因素之一，不同类型的网站有不同的背景和基调。背景属性在命名时，使用“backgroup-”前缀。CSS3的属性CSS背景属性

目录CSS3的属性5.1CSS背景属性5.2CSS字体属性5.3CSS文本属性5.4CSS尺寸属性5.5CSS列表属性5.6CSS表格属性5.7CSS内容属性5.8CSS属性的应用5.9实训——制作社区网页面习题5

5.1CSS背景属性5.1.1背景颜色属性background-color语法：background-color:color|transparentp{background-color:silver;}div{background-color:rgb(223,71,177);}body{background-color:#98AB6F;}pre{background-color:transparent;}

5.1CSS背景属性【例5-1】设置元素的背景颜色，本例文件5-1.html在浏览器中显示的效果如图5-1所示。

5.1CSS背景属性!DOCTYPEhtmlhtmlheadmetacharset=utf-8title设置背景色/titlestyletype=text/cssh1{/*标题1的背景色*/background-color:coral;}p{/*段落的背景色*/background-color:darkgrey;}table{/*表格的背景色*/background-color:yellow;}/style/head

5.1CSS背景属性bodystyle=background:gainsboro;!--设置整个网页的背景色--h1设置背景色/h1p网页背景是网页设计的最要因素之一，不同类型的网站有不同的背景和基调。/ptableborder=1cellspacing=cellpadding=trthstyle=background-color:red;姓名/th!--表格单元格的背景色--th性别/th/trtrstyle=background-color:yellowgreen;!--设置表格的行的背景色--td张三/tdtd女/td/tr/table/body/html

5.1.2背景图像属性background-image语法：background-image:none|url(url),url(url),…|linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradientbody{background-image:none;}div{background-image:url(images/backimg.jpg);}blockquote{background-image:url(backpic.jpg);}br{background-image:url(/ImageFile/aa.gif);}body{background-image:url(bg_flower.gif),url(bg_flower_2.gif);}div{background:url(bg1.jpg)00no-repeat,url(bg2.jpg)200px0no-repeat,url(gb3.jpg)400px200pxno-repeat;}5.1CSS背景属性

【例5-2】设置元素的背景图像。本例文件5-2.html在浏览器中显示的效果如图5-2所示。5.1CSS背景属性

!DOCTYPEhtmlhtmlheadmetacharset=utf-8title设置背景图像/titlestyletype=text/cssbody{/*整个网页的背景图片*/