使用css样式表设置背景颜色与图像

《使用css样式表设置背景颜色与图像》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第九讲使用CSS设置背景颜色与图像回顾CSS中如何设置图片代替文本？图文混排中，使用哪个CSS属性可以实现？CSS中剪切图片的思路是如何呢？背景颜色给页面分块背景图片的设置背景图像替换滑动门技术的标题背景综合一：我的个人主页背景综合二：古词《念奴娇·赤壁怀古》本讲目标新知识导入对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景。但是，浏览一下大型的商业网站，你会发现他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅，大方和温馨。更重要的是，这样可以大大加快浏览者打开网页的速度。常用的浅色案例一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配

2、上深色的文字，使人看起来自然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜色。网页颜色原理和象征意义我们所有网页上颜色，在HTML下看到的是以颜色英文单词或者十六进制的表示方法（如#000000表示为黑色）。不同的颜色有着不同的含义，给人各种丰富的感觉和联想。红色---是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。绿色---介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。 它和金黄，淡白搭配，可以产生优雅，舒适的气氛。橙色---也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。黄色---具有快乐，希望，智慧和轻快

3、的个性，它的明度最高。蓝色---是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛(象天空的色彩)黑色---具有深沉，神秘，寂静，悲哀，压抑的感受。灰色---具有中庸，平凡，温和，谦让，中立和高雅的感觉。白色---具有洁白，明快，纯真，清洁的感受。网页颜色的使用风格1、公司色　　在现在企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。比如新浪网的主色调是一种介于浅黄和深黄之间的颜色，同时形象宣传、海报、广告使用的颜色都和网站的颜色一致。再比如国富投资公司的主色调是C：100%，M：60%，Y：0%，K：0%。这样的

4、颜色使用到网站上显得色调自然、底蕴深厚。2、风格色　　许多网站使用颜色秉承的是公司的风格。比如海尔使用的颜色是一种中性的绿色，即充满朝气有不失自己的创新精神。女性网站使用粉红色的较多，大公司使用蓝色的较多……这些都是在突出自己的风格。3、习惯色　　这些网站的颜色使用很大一部分是凭自己的个人爱好，以个人网站较多使用，比如自己喜欢红色、紫色、黑色等，在做网站的时候就倾向于这种颜色。每一个人都有自己喜欢的颜色，因此这种类型称为习惯色。案例演示背景色给页面分块查看源代码背景图片的重复使用CSS为页面添加背景图片的方法，使用属性background-imagebackg

5、round-image:url(bg1.jpg);/*背景图片*/background-repeat:repeat-y;/*垂直方向重复*/案例演示1案例演示2案例演示3案例演示4背景图片的位置发现：无论网页如何拉伸，楼房的背景图片一直处于页面的右下角，那么将如何设置呢？查看源代码添加多个背景图片由于在CSS中，一个标记只能使用一次background属性，若想添加多个背景，只有给多个标记添加不同背景来实现查看源代码背景样式的缩写background-color:blue;background-image:url(bg1.jpg);background-repea

6、t:repeat-y;background-attachment:fixed;background-position:5px10px;background:blueurl(bg1.jpg)repeat-yfixed5px10px;严格来说没什么顺序之分，但推荐一定的次序有利于代码修改和阅读：颜色、背景图片、是否重复、是否固定、如何定位标题的图像替换素材准备参考代码滑动门技术的标题效果：我们看到上述两行，背景图片可长可短，就像滑动门似的。用途：常用于标题或导航。参考代码背景综合一：我的个人主页查看源代码背景综合二：古词《念奴娇·赤壁怀古》查看源代码千里之行始于足下1

7、7