使用CSS样式表设置背景颜色与图像.ppt

第九讲,使用CSS设置背景颜色与图像,回顾,CSS中如何设置图片代替文本？图文混排中，使用哪个CSS属性可以实现？CSS中剪切图片的思路是如何呢？,背景颜色给页面分块背景图片的设置背景图像替换滑动门技术的标题背景综合一：我的个人主页背景综合二：古词念奴娇赤壁怀古,本讲目标,新知识导入,对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景。但是，浏览一下大型的商业网站，你会发现他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅，大方和温馨。更重要的是，这样可以大大加快浏览者打开网页的速度。,常用的浅色案例,一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜色。,网页颜色原理和象征意义,我们所有网页上颜色，在HTML下看到的是以颜色英文单词或者十六进制的表示方法（如#000000表示为黑色）。不同的颜色有着不同的含义，给人各种丰富的感觉和联想。,网页颜色的使用风格,1、公司色 在现在企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。比如新浪网的主色调是一种介于浅黄和深黄之间的颜色，同时形象宣传、海报、广告使用的颜色都和网站的颜色一致。再比如国富投资公司的主色调是C：100%，M：60%，Y：0%，K：0%。这样的颜色使用到网站上显得色调自然、底蕴深厚。2、风格色 许多网站使用颜色秉承的是公司的风格。比如海尔使用的颜色是一种中性的绿色，即充满朝气有不失自己的创新精神。女性网站使用粉红色的较多，大公司使用蓝色的较多这些都是在突出自己的风格。3、习惯色 这些网站的颜色使用很大一部分是凭自己的个人爱好，以个人网站较多使用，比如自己喜欢红色、紫色、黑色等，在做网站的时候就倾向于这种颜色。每一个人都有自己喜欢的颜色，因此这种类型称为习惯色。,案例演示,背景色给页面分块,查看源代码,背景图片的重复,使用CSS为页面添加背景图片的方法，使用属性 background-image,background-image:url(bg1.jpg);/*背景图片*/background-repeat:repeat-y;/*垂直方向重复*/,案例演示1,案例演示2,案例演示3,案例演示4,背景图片的位置,发现：无论网页如何拉伸，楼房的背景图片一直处于页面的右下角，那么将如何设置呢？,查看源代码,添加多个背景图片,由于在CSS中，一个标记只能使用一次background属性，若想添加多个背景，只有给多个标记添加不同背景来实现,查看源代码,背景样式的缩写,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;,严格来说没什么顺序之分，但推荐一定的次序有利于代码修改和阅读：颜色、背景图片、是否重复、是否固定、如何定位,标题的图像替换,素材准备,参考代码,滑动门技术的标题,效果：我们看到上述两行，背景图片可长可短，就像滑动门似的。用途：常用于标题或导航。,参考代码,背景综合一：我的个人主页,查看源代码,背景综合二：古词念奴娇赤壁怀古,查看源代码,千里之行 始于足下,17,