第9讲使用CSS样式表设置背景颜色与图像.pptVIP

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