CSS设置html网页背景图片 CSS设置网页背景颜色

CSS设置html网页背景图片 CSS设置网页背景颜色CSS设置html网页背景图片 CSS设置网页背景颜色

CSS设置html网页背景图片 CSS设置网页背景颜色

CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇

本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技巧为主,希望对DIV CSS爱好者有帮助。通常对网页设置背景直接对body设置背景演示即可实现。接下来给大家介绍各种情况下背景处理布局技巧。

无论怎么设置背景都需要用到background样式,如果对background比较陌生可以进入了解学习。

一、网页单色背景   -  

如果纯颜色的网页背景,只需要对body设置background背景颜色即可

body{background:#FFF} 

设置网页背景为白色

二、规律背景图片   -  

1、从上到下渐变横向相同背景


渐变从上到下宽度全屏背景效果截图

这种网页背景只需要切出1像素宽,高度合适的图片作为背景素材,如下图:


切出这样一个竖条图片素材作为背景素材

body{background:#FFF url(bg.gif) repeat-x 0} 

这样设置这个图片为背景图片靠网页顶部水平平铺,背景为白色,这里注意根据你的图片路径设置好引入图片路径。

2、水平平铺类背景图片
比如2014版DIVCSS5网页,原理和渐变平铺相同,也是切出一竖条后作为Body背景水平平铺实现,这样就全屏网页背景铺满。


css切出这样一个竖条效果截图

代码和第1种相同,只是图片不同而已。对body设置背景图片水平平铺。

三、不规律大图背景   -  

常常看到一些专题或形象网页,背景是一种非常大图片作为背景,而通常情况下宽屏和窄屏显示器都能显示铺满的全屏背景图片,就像图片能自适应宽度大小一样的。其实这种实现一样非常简单,将这张图片宽度美工设计足够大,比如市场上最宽显示屏分辨率宽度为2560像素,那么要让这样的宽屏显示器浏览此网页也能铺满全屏,那么你的这张背景图片就必须做成宽度大于或等于2560px宽度的,这样以来宽屏、窄屏显示器打开此网页都能铺满全屏,最小化、最大化、改变浏览器窗口打开背景图片都是全屏的居中的看上去就像背景图片自适应大小一样。

关键:全屏自适应背景图片关键是图片做足够宽,以最宽分辨率显示屏能都铺满,小分辨率自然就更是铺满。同时需要设置这样背景图片作为body背景后需要居中。

假如这张背景图片为:bg.jpg
设置CSS代码:

body{background: url(bg.jpg) no-repeat center 0} 

代码解释:设置这个图片为网页背景,通常不平铺(no-repeat),水平居中,靠上显示

四、头部背景图片和底部背景图片内容多少高度可增减头部底部背景不变   -  

这里DIVCSS5为大家介绍两种常见头部和底部不同背景图片技巧设置布局方法。

1、头部和版权图片
这种直接将头部背景图片设置为body背景居中靠上显示,底部版权地方DIV设置宽度100%;同时设置此背景图片或背景颜色。

body{background: url(bg.jpg) no-repeat center 0} 

#footer{margin:0 auto;width:100%;background: url(ft-bg.jpg) no-repeat center 0} 

这样即可实现头部底部背景不同,同时不受内容多少高度影响。

2、网页靠顶部上背景图与固定底部靠下背景图
而靠底部背景图片远超出了版权底部盒子高度。


网页靠上靠下背景图片不同,内容区域跨越靠上和靠下的背景效果截图

这样的结构上下不同图片,不随中间内容增高减少影响背景布局,通常对html标签和body设置背景即可实现。

假如顶部深蓝背景图片为“top.jpg”,底部浅蓝背景图片为“foot.jpg”

DIV CSS设置网页背景关键CSS代码:

html{background: url(top.jpg) no-repeat center 0} 

body{background: url(foot.jpg) no-repeat center bottom} 

解释:设置深蓝背景图片为html背景水平居中靠上;设置浅蓝背景图片为body背景图片水平居中靠下。

网站免责声明 本网站所提供的信息,只供参考之用。 本网站及其雇员一概毋须以任何方式就任何信息传递或传送的失误、不准确或错误对用户或任何其他人士负任何直接或间接的责任。 本网站在此声明,不承担用户或任何人士就使用或未能使用本网站所提供的信息或任何链接或项目所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿(包括但不限于收益、预期利润的损失或失去的业务、未实现预期的节省)。 本网站所提供的信息,若在任何司法管辖地区供任何人士使用或分发给任何人士时会违反该司法管辖地区的法律或条例的规定或会导致本网站或其第三方代理人受限于该司法管辖地区内的任何监管规定时,则该等信息不宜在该司法管辖地区供该等任何人士使用或分发给该等任何人士。用户须自行保证不会受限于任何限制或禁止用户使用或分发本网站所提供信息的当地的规定。 本网站图片,文字之类版权申明,因为网站可以由注册用户自行上传图片或文字,本网站无法鉴别所上传图片或文字的知识版权,如果侵犯,请及时通知我们,本网站将在第一时间及时删除。 凡以任何方式登陆本网站或直接、间接使用本网站资料者,视为自愿接受本网站声明的约束。联系QQ515827934