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

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