第9讲_使用CSS样式表设置背景颜色与图像
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
回顾
CSS中如何设置图片代替文本？ 图文混排中，使用哪个CSS属性可以实现？ CSS中剪切图片的思路是如何呢？
本讲目标
背景颜色给页面分块 背景图片的设置 背景图像替换
滑动门技术的标题
背景综合一：我的个人主页
背景综合二：古词《念奴娇· 赤壁怀古》
新知识导入
对于做网页的初学者可能更习惯于使用一些 漂亮的图片作为自己网页的背景。 但是，浏览一下大型的商业网站，你会发现 他们更多运用的是白色、蓝色、黄色等，使得网 页显得典雅，大方和温馨。更重要的是，这样可 以大大加快浏览者打开网页的速度。
常用的浅色案例
一般来说，网页的背景色应该柔和一些、素一些、淡一些， 再配上深色的文字，使人看起来自然、舒畅。而为了追求醒 目的视觉效果，可以为标题使用较深的颜色。
网页颜色原理和象征意义
我们所有网页上颜色，在HTML下看到的是以颜色英文单词 或者十六进制的表示方法（如#000000表示为黑色）。不 红色---是一种激奋的色彩。刺激效果，能使人产生冲动，愤 怒，热情，活力的感觉。 同的颜色有着不同的含义，给人各种丰富的感觉和联想。
绿色---介于冷暖两中色彩的中间，显得和睦，宁静，健康， 安全的感觉。 它和金黄，淡白搭配，可以产生优雅，舒适的 气氛。 橙色---也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨， 时尚的效果。 黄色---具有快乐，希望，智慧和轻快的个性，它的明度最 高。 蓝色---是最具凉爽，清新，专业的色彩。它和白色混合，能 体现柔顺，淡雅，浪漫的气氛(象天空的色彩)
案例演示3
案例演示4
背景图片的位置
查看源代码
发现：无论网页如何拉伸，楼房的背景图片一直处于页面的 右下角，那么将如何设置呢？
添加多个背景图片
由于在CSS中，一个标记只能使用一次background属性， 若想添加多个背景，只有给多个标记添加不同背景来实现
查看源代码
背景样式的缩写
background-color:blue; background-image:url(bg1.jpg); background-repeat:repeat-y; background-attachment:fixed; background-position:5px 10px;
背景色给页面分块
查看源代码
背景图片的重复
使用CSS为页面添加背景图片的方法，使用属性 background-image
background-image:url(bg1.jpg); background-repeat:repeat-y; /* 背景图片 */ /* 垂直方向重复 */
案例演示1
案例演示2
背景综合一：我的个人主页
查看源代码
背景综合二：古词《念奴娇· 赤壁怀古》 查看源代码
千里之行 ቤተ መጻሕፍቲ ባይዱ于足下
17
background:blue url(bg1.jpg) repeat-y fixed 5px 10px; 严格来说没什么顺序之分，但推荐一定的次序有利于代码修改和阅 读：颜色、背景图片、是否重复、是否固定、如何定位
标题的图像替换
素材准备
参考代码
滑动门技术的标题
参考代码
效果：我们看到上述两行，背景图片可长可短，就像滑动门似的。 用途：常用于标题或导航。
白色---具有洁白，明快，纯真，清洁的感受。 黑色---具有深沉，神秘，寂静，悲哀，压抑的感受。 灰色---具有中庸，平凡，温和，谦让，中立和高雅的感觉。
网页颜色的使用风格
案例演示
1、 公司色 在现在企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要 有标准的颜色。比如新浪网的主色调是一种介于浅黄和深黄之间的颜色，同 时形象宣传、海报、广告使用的颜色都和网站的颜色一致。再比如国富投资 公司的主色调是C：100%，M：60%，Y：0%，K：0%。这样的颜色使用到网 站上显得色调自然、底蕴深厚。 2、 风格色 许多网站使用颜色秉承的是公司的风格。比如海尔使用的颜色是一种中 性的绿色，即充满朝气有不失自己的创新精神。女性网站使用粉红色的较多 ，大公司使用蓝色的较多……这些都是在突出自己的风格。 3、 习惯色 这些网站的颜色使用很大一部分是凭自己的个人爱好，以个人网站较多 使用，比如自己喜欢红色、紫色、黑色等，在做网站的时候就倾向于这种颜 色。每一个人都有自己喜欢的颜色，因此这种类型称为习惯色。
CSS中如何设置图片代替文本？ 图文混排中，使用哪个CSS属性可以实现？ CSS中剪切图片的思路是如何呢？
本讲目标
背景颜色给页面分块 背景图片的设置 背景图像替换
滑动门技术的标题
背景综合一：我的个人主页
背景综合二：古词《念奴娇· 赤壁怀古》
新知识导入
对于做网页的初学者可能更习惯于使用一些 漂亮的图片作为自己网页的背景。 但是，浏览一下大型的商业网站，你会发现 他们更多运用的是白色、蓝色、黄色等，使得网 页显得典雅，大方和温馨。更重要的是，这样可 以大大加快浏览者打开网页的速度。
常用的浅色案例
一般来说，网页的背景色应该柔和一些、素一些、淡一些， 再配上深色的文字，使人看起来自然、舒畅。而为了追求醒 目的视觉效果，可以为标题使用较深的颜色。
网页颜色原理和象征意义
我们所有网页上颜色，在HTML下看到的是以颜色英文单词 或者十六进制的表示方法（如#000000表示为黑色）。不 红色---是一种激奋的色彩。刺激效果，能使人产生冲动，愤 怒，热情，活力的感觉。 同的颜色有着不同的含义，给人各种丰富的感觉和联想。
绿色---介于冷暖两中色彩的中间，显得和睦，宁静，健康， 安全的感觉。 它和金黄，淡白搭配，可以产生优雅，舒适的 气氛。 橙色---也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨， 时尚的效果。 黄色---具有快乐，希望，智慧和轻快的个性，它的明度最 高。 蓝色---是最具凉爽，清新，专业的色彩。它和白色混合，能 体现柔顺，淡雅，浪漫的气氛(象天空的色彩)
案例演示3
案例演示4
背景图片的位置
查看源代码
发现：无论网页如何拉伸，楼房的背景图片一直处于页面的 右下角，那么将如何设置呢？
添加多个背景图片
由于在CSS中，一个标记只能使用一次background属性， 若想添加多个背景，只有给多个标记添加不同背景来实现
查看源代码
背景样式的缩写
background-color:blue; background-image:url(bg1.jpg); background-repeat:repeat-y; background-attachment:fixed; background-position:5px 10px;
背景色给页面分块
查看源代码
背景图片的重复
使用CSS为页面添加背景图片的方法，使用属性 background-image
background-image:url(bg1.jpg); background-repeat:repeat-y; /* 背景图片 */ /* 垂直方向重复 */
案例演示1
案例演示2
背景综合一：我的个人主页
查看源代码
背景综合二：古词《念奴娇· 赤壁怀古》 查看源代码
千里之行 ቤተ መጻሕፍቲ ባይዱ于足下
17
background:blue url(bg1.jpg) repeat-y fixed 5px 10px; 严格来说没什么顺序之分，但推荐一定的次序有利于代码修改和阅 读：颜色、背景图片、是否重复、是否固定、如何定位
标题的图像替换
素材准备
参考代码
滑动门技术的标题
参考代码
效果：我们看到上述两行，背景图片可长可短，就像滑动门似的。 用途：常用于标题或导航。
白色---具有洁白，明快，纯真，清洁的感受。 黑色---具有深沉，神秘，寂静，悲哀，压抑的感受。 灰色---具有中庸，平凡，温和，谦让，中立和高雅的感觉。
网页颜色的使用风格
案例演示
1、 公司色 在现在企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要 有标准的颜色。比如新浪网的主色调是一种介于浅黄和深黄之间的颜色，同 时形象宣传、海报、广告使用的颜色都和网站的颜色一致。再比如国富投资 公司的主色调是C：100%，M：60%，Y：0%，K：0%。这样的颜色使用到网 站上显得色调自然、底蕴深厚。 2、 风格色 许多网站使用颜色秉承的是公司的风格。比如海尔使用的颜色是一种中 性的绿色，即充满朝气有不失自己的创新精神。女性网站使用粉红色的较多 ，大公司使用蓝色的较多……这些都是在突出自己的风格。 3、 习惯色 这些网站的颜色使用很大一部分是凭自己的个人爱好，以个人网站较多 使用，比如自己喜欢红色、紫色、黑色等，在做网站的时候就倾向于这种颜 色。每一个人都有自己喜欢的颜色，因此这种类型称为习惯色。