HTML怎么设置网页背景图-tutorial css-php.cn

HTML怎么设置网页背景图

php中世界最好的语言

Lepaskan： 2017-11-23 14:00:52

asal

43776 orang telah melayarinya

今天和大家来说一下HTML怎么设置网页背景图，我们用整个网页的布局思维来看，有哪些方法可以设置，每种方法有什么不同。以及设置背景图的技巧

网页单色背景

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

body{background:#FFF}

设置网页背景为白色

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

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

2、水平平铺类背景图片

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

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

不规律大图背景

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

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

假如这张背景图片为：bg.jpg

设置CSS代码：

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

Salin selepas log masuk

代码解释：设置这个图片为网页背景，通常不平铺（no-repeat），水平居中，靠上显示

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

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

这种直接将头部背景图片设置为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}

Salin selepas log masuk

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

而靠底部背景图片远超出了版权底部盒子高度。

这样的结构上下不同图片，不随中间内容增高减少影响背景布局，通常对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}

Salin selepas log masuk

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

以上是总结常见几种网页背景布局设置，灵活设置不管对body、html、div均能设置背景实现自己要的背景效果，如果对div设置为这个网页背景，那这个DIV高度就不能设置（默认自动）、div宽度设置100%即可。

设置网页背景图就是这些，更多精彩请关注php中文网其它相关文章！