《WEB前端设计》网页背景颜色
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页背景颜色CSS属性
WEB PAGE CATEGORY
• 线性渐变
语法： background: linear-gradient(direction, color-stop1, color-stop2, ...);
渐变颜色
渐变方向 可取值top、left bottom、 right，或 斜角度top left等，不设 置此值为默认从上至下
/* 标准的语法（必须放在最后） */
}
网页背景颜色CSS属性
WEB PAGE CATEGORY
• 线性渐变
举例：斜角方向渐变
<div id="grad1"></div>
#grad1 { height: 200px; background: -webkit-linear-gradient(left top,red, blue); background: -o-linear-gradient(bottom right,red, blue); background: -moz-linear-gradient(bottom right,red, blue); background: linear-gradient(to bottom right,red, blue);
！ 注意：由于渐变色背景设置为CSS3新增属性，在使用时需要考虑兼容浏览器。
网页背景颜色CSS属性
WEB PAGE CATEGORY
• 线性渐变
举例：垂直方向渐变
<div id="grad1"></div>
#grad1 { height: 200px; background: -webkit-linear-gradient(red, blue); background: -o-linear-gradient(red, blue); background: -moz-linear-gradient(red, blue); background: linear-gradient(red, blue);
网页背景颜色CSS属性
WEB PAGE CATEGORY
• 渐变色背景
指在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用 图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可 以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看 起来效果更好，因为渐变（gradient）是由浏览器生成的。 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义
网页背景颜色
教学目标
Teaching Goal
1
• 回顾网页Hale Waihona Puke Baidu景各种属性
• 掌握网页中颜色背景的设置
2
教学内容
Teaching Content
网页背景颜色CSS属性
WEB PAGE CATEGORY
• 属性background 、background-color，可以设置纯色和渐变色为网页背景
3
教学小结
Teaching Summary
本节主要介绍了颜色应用于网页的知识内容，结合背景属性 background等，重点讲解了线性渐变色和径向渐变色的设置 方法，需结合具体网页效果适当选择应用。
• RGB形式: background: rgb(0,0,255);
background:rgb(10% , 50% , 100% );
• 颜色名称: background:red;
• RGBA形式: background:rgba( 0 , 0 , 0 , .5 );
表示颜色透明度，取值为0-1
• HSL形式: background:hsl (360 , 50% , 50% );
效果
代码
<body>
<h1>我的 CSS web 页!</h1>
<p>你好！这是来自 web前端设计教程的实例。</p>
</body>
Html结构
body{
CSS文档
background-color:#b0c4de;
}
网页背景颜色CSS属性
WEB PAGE CATEGORY
• 颜色表示法
• 16进制形式: background: #FFFFFF;（或#FFF、#fff）
WEB PAGE CATEGORY
• 径向渐变
举例：
#grad1 { height: 150px; width: 200px; background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); background: -o-radial-gradient(red 5%, green 15%, blue 60%); background: -moz-radial-gradient(red 5%, green 15%, blue 60%); background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法（必须放在最后） */ 占比 }
/* 标准的语法（必须放在最后） */
}
网页背景颜色CSS属性
WEB PAGE CATEGORY
• 径向渐变
渐变形状
background: radial-gradient(center, shape size, start-color, ..., last-color)
由中心点开始
渐变颜色
网页背景颜色CSS属性