网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS背景属性_第1页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS背景属性_第2页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS背景属性_第3页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS背景属性_第4页
网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS背景属性_第5页
已阅读5页，还剩47页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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

CSS3的属性

CSS背景属性目录

CSS3的属性5.1CSS背景属性5.2CSS字体属性5.3CSS文本属性5.4CSS尺寸属性5.5CSS列表属性5.6CSS表格属性5.7CSS内容属性5.8CSS属性的应用5.9实训——制作社区网页面习题55.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背景属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>设置背景色</title><styletype="text/css">h1{/*标题1的背景色*/background-color:coral;}p{/*段落的背景色*/background-color:darkgrey;}table{/*表格的背景色*/background-color:yellow;}</style></head>5.1CSS背景属性<bodystyle="background:gainsboro;"><!--设置整个网页的背景色--><h1>设置背景色</h1><p>网页背景是网页设计的最要因素之一，不同类型的网站有不同的背景和基调。</p><tableborder="1"cellspacing=""cellpadding=""><tr><thstyle="background-color:red;">姓名</th><!--表格单元格的背景色--><th>性别</th></tr><trstyle="background-color:yellowgreen;"><!--设置表格的行的背景色--><td>张三</td><td>女</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背景属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>设置背景图像</title><styletype="text/css">body{/*整个网页的背景图片*/background-image:url(images/sunshine.jpg);}p{/*段落的背景图片和颜色*/background-color:darkgrey;background-image:url(images/flowers1.jpg);}table{/*表格的背景图片*/background-image:url(images/rose2.jpg);width:400px;height:300px;}</style></head>5.1CSS背景属性<body><p>网页背景是网页设计的最要因素之一，不同类型的网站有不同的背景和基调。CSS有非常丰富的背景属性。CSS允许为任何元素添加纯色背景，也允许使用图像作为背景。</p><tableborder="1"cellspacing="20"cellpadding="30"><tr><thstyle="background-image:url(images/buttonblue.jpg);">姓名</th><!--表格的单元格的背景图片--><th>性别</th></tr><trstyle="background-image:url(images/buttonaqua.jpg);"><!--设置表格的行的背景图片--><td>张三</td><td>女</td></tr></table></body></html>5.1CSS背景属性【例5-3】多背景图像属性示例。本例文件5-3.html在浏览器中显示的效果，如图5-3所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>多背景图像</title><styletype="text/css">

div{width:400px;height:300px;border:5pxdashed;float:left;margin:5px;background-image:url(images/apple.jpg),url(images/apple2.gif),url(images/apple3.jpg),url(images/apple4.jpg);background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;background-position:lefttop,righttop,rightbottom,leftbottom;background-size:120px120px;}</style></head>5.1CSS背景属性<body><divid="">

内容

</div></body></html>5.1CSS背景属性5.1.3重复背景图像属性background-repeat语法：background-repeat:repeat|no-repeat|repeat-x|repeat-ytable{background:url("images/buttondvark.gif");background-repeat:repeat-y;}p{background:url("images/rose.gif");background-repeat:no-repeat;}5.1CSS背景属性例5-4】设置重复背景图像示例。本例文件5-4a.html、5-4b.html、5-4c.html、5-4d.html在浏览器中显示的效果，如图所示。5.1CSS背景属性5.1CSS背景属性背景图像不重复的CSS定义代码如下：body{background-color:beige;background-image:url(images/backpic.jpg);background-repeat:no-repeat;}背景图像水平重复的CSS定义代码如下：body{background-color:beige;background-image:url(images/backpic.jpg);background-repeat:repeat-x;}背景图像垂直重复的CSS定义代码如下：body{background-color:beige;background-image:url(images/backpic.jpg);background-repeat:repeat-y;}背景图像重复的CSS定义代码如下：body{background-color:beige;background-image:url(images/backpic.jpg);background-repeat:repeat;}5.1CSS背景属性5-4a.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>设置背景图片重复1</title><styletype="text/css">body{/*背景图像不重复的CSS定义代码*/background-color:beige;background-image:url(images/backpic.jpg);background-repeat:no-repeat;}</style></head><body></body></html>5.1CSS背景属性5-4b.html<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>设置背景图片重复1</title> <styletype="text/css"> body{ background-color:beige; background-image:url(images/backpic.jpg); background-repeat:repeat-x; } </style> </head> <body> </body></html>5.1CSS背景属性5-4c.html<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>设置背景图片重复1</title> <styletype="text/css"> body{ background-color:beige; background-image:url(images/backpic.jpg); background-repeat:repeat-y; } </style> </head> <body> </body></html>5.1CSS背景属性5-4d.html<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>设置背景图片重复1</title> <styletype="text/css"> body{ background-color:beige; background-image:url(images/backpic.jpg); background-repeat:repeat; } </style> </head> <body> </body></html>5.1CSS背景属性5.1.4固定背景图像属性background-attachment语法：background-attachment:scroll|fixed示例：设置或检索背景图像是随对象内容滚动还是固定的。html{background-image:url("rose.jpg");background-attachment:fixed;}5.1.5背景图像位置属性background-position语法：background-position:positionposition|lengthlengthbody{background:url("images/backpic.jpg");background-position:topright;}div{background:url("images/back.gif");background-position:30%75%;}table{background:url("images/back.gif");background-position:35%2.5cm;}a{background:url("images/backpic.jpg");background-position:5.25in;}5.1CSS背景属性【例5-5】设置背景图像位置，本例文件5-5.html在浏览器中的显示效果如图5-5所示。5.1CSS背景属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>背景图像位置属性</title><styletype="text/css">div{background-image:url(images/lotus.jpg);/*背景图片*/background-repeat:no-repeat;/*图片不重复显示*/width:800px;/*设置元素宽度*/height:250px;/*设置元素高度*/}</style></head>5.1CSS背景属性<body><divstyle="background-position:centercenter;">当在网页中插入背景图像时，默认的位置都是网页的左上角。可以通过background-position属性来改变图像的插入位置。background-position设置背景图像原点的位置，如果图像需要平铺，则从这一点开始平铺。默认值为左上角的零点位置，这两个值之间用空格隔开，写作00。</div><hr><divstyle="background-position:90%10%;"></div></body></html>5.1CSS背景属性5.1CSS背景属性5.1.6背景图像大小属性background-size语法：background-size:[length|percentage|auto]{1,2}|cover|containdiv{background:url(bg_flower.gif);background-size:100px80px;background-repeat:no-repeat;}5.1CSS背景属性【例5-6】设置背景图片大小，本例文件5-6.html在浏览器中显示的效果如图5-6所示，对背景图片进行拉伸，使其完成填充内容区域。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>背景图像大小属性</title></head><body><divstyle="border:1pxsolid#00f;padding:90px5px10px;background:url(images/lotus.jpg)no-repeat;background-size:100%80px">

这里的background-size:100%80px。背景图像与div一样宽，高为80px。

</div></body></html>5.1CSS背景属性5.1.7背景属性backgroud语法：background:background-color|background-image|background-repeat|background-attachment|background-position示例：body{background:url("images/bg.gif")repeat-y;}div{background:redno-repeatscroll5%60%;}caption{background:#ffff00url("images/bg.gif")no-repeat50%50%;}pre{background:url("images/bg.gif")topright;}5.1CSS背景属性5.1CSS背景属性5.1.8背景覆盖区域属性backgroud-clip语法：background-clip:border-box|padding-box|content-box5.1CSS背景属性【例5-7】设置背景覆盖区域，本例文件5-7.html在浏览器中显示的效果，如图5-7所示。5.1CSS背景属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>背景覆盖区域属性</title><styletype="text/css">div{width:100px;height:120px;padding:20px;border:5pxdotted;float:left;margin:5px;background:aqua;}</style></head>

5.1CSS背景属性<body><div>内容</div><divstyle="background-clip:border-box;">内容</div><divstyle="background-clip:padding-box;">内容</div><divstyle="background-clip:content-box;">内容</div></body></html>5.1CSS背景属性5.1.9背景图像起点属性backgroup-origin语法：background-origin:padding-box|border-box|content-box5.1CSS背景属性【例5-8】背景覆盖起点属性，本例文件5-8.html在浏览器中显示的效果如图5-9所示。5.1CSS背景属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>background-origin属性</title><styletype="text/css">div{padding:30px;border:10pxdasheddarkorange;background-image:url('images/apple.jpg');background-size:100px100px;background-repeat:no-repeat;}#div1{background-origin:border-box;}#div2{background-origin:padding-box;}#div3{background-origin:content-box;}</style></head>5.1CSS背景属性

<divid="div1">

<p>这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。</p>

</div>

<p>background-origin:padding-box：</p>

<divid="div2">

<p>这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。</p>

</div>

<p>background-origin:content-box：</p>

<divid="div3">

<p>这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。这是文本内容。</p>

</div></body></html>5.1CSS背景属性5.1.10背景渐变属性background-image1.线性渐变语法：background-image:linear-gradient|radial-gradient(direction,color-stop1,color-stop2,...)#div1{background-image:linear-gradient(red,yellow);}#div2{background-image:linear-gradient(toright,red,yellow);}#div3{background-image:linear-gradient(tobottomright,red,yellow);}5.1CSS背景属性2.使用角度语法：background-image:linear-gradient|radial-gradient(angle,color-stop1,color-stop2)5.1CSS背景属性【例5-9】背景渐变属性。本例文件5-9.html在浏览器中显示的效果，如图5-11所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>背景渐变</title><styletype="text/css">div{width:200px;height:200px;border:5pxdashed;float:left;margin:5px;}</style></head>5.1CSS背景属性<body><divstyle="background-image:linear-gradient(red,yellow);float:left;">

内容1</div><divstyle="background-image:linear-gradient(toright,red,yellow);float:left;">

内容2</div><divstyle="background-image:linear-gradient(tobottomright,red,yellow);float:left;">

内容3</div><divstyle="background-image:linear-gradient(-90deg,red,yellow);float:left;">

内容4</div><divstyle="background-image:linear-gradient(-45deg,red,yellow);float:left;">

内容5</div></body></html>5.1CSS背景属性3.使用多个颜色结点可以使用多个颜色结点。例如，下面的代码创建带有多个颜色结点的从上到下的线性渐变：#div5{background-image:linear-gradient(red,yellow,green);}例如，下面代码创建一个带有彩虹颜色和文本的线性渐变：#div6{/*标准的语法*/background-image:linear-gradient(toright,red,orange,yellow,green,blue,indigo,violet);}5.1CSS背景属性4.使用透明度（transparent）例如，下面的代码从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：#div7{/*从左到右的线性渐变，带有透明度*/background-image:linear-gradient(toright,rgba(255,0,0,0),rgba(255,0,0,1));}5.1CSS背景属性5.重复的线性渐变repeating-linear-gradient()函数用于重复线性渐变。例如，下面代码是一个重复的线性渐变。#div8{/*标准的语法*/background-image:repeating-linear-gradient(red,yellow10%,green20%);}5.1CSS背景属性【例5-10】

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论