电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

HTML怎么设置网页背景图

2020-11-28 13:44:42 出处:[ 菜菜电脑网 ] 人气:次阅读
今天和大家来说一下HTML怎么设置网页背景图,我们用整个网页的布局思维来看,有哪些方法可以设置,每种方法有什么有所不同。以及设置背景图的技巧

网页单色背景

如果;也颜色的网页背景,只所需对body设置background背景颜色即可

body{background:#FFF}

设置网页背景为白色

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

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

2、水平平铺类背景图片

比如2014版网页,原理和由上而下平铺相同,也是切开一竖条后作为Body背景水平平铺充分利用,这样就全屏网页背景堆满。

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

不规律大图背景

常常看见一些专题或形象网页,背景是一种非常大图片作为背景,而通常情况下长三屏和狭窄屏显示器都能表明一块的全屏背景图片,就像图片能自适应宽度大小一样的。其实这种意味着一样非常简单,将这张图片宽度美工设计充足大,比如市场上最最宽处显示屏分辨率宽度为2560像素,那么要让这样的周长屏显示器上传此网页也能围起来全屏,那么你的这张背景图片就必须会用宽度大于或等于2560px宽度的,这样以来较宽屏、平直屏显示器推入此网页都能凿出全屏,最小化、最大化、发生变化浏览器窗口弹出背景图片都是全屏的亦同的看来就像背景图片自适应大小一样。

关键:全屏自适应背景图片关键是图片来作够大窄,以最长分辨率显示屏能都凿出,小分辨率自然就更是大块。同时必须设置这样背景图片作为body背景后只能Pardosa。

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

设置CSS代码:

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

代码推论:设置这个图片为网页背景,通常不平铺(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}

这样即可意味着头部底部背景相异,同时不所受内容多少高度影响。

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

这样的结构上下有所不同图片,不随中间内容上升减低影响背景布局,通常对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背景图片水平位与靠下。

以上是总结类似几种网页背景布局设置,敏捷设置不管对body、html、div均能设置背景借助自己要的背景效果,如果对div设置为这个网页背景,那这个DIV高度就不会设置(可选自动)、div宽度设置100%即可。

设置网页背景图就是这些,更多精彩商量关心php中文网其它无关文章!

具体读者:

HTML里字体颜色怎么设置

HTML里空格字符怎么可用

为什么要对DIV设置CSS样式?

以上就是HTML怎么设置网页背景图的详细资料内容,更多特地追捧php中文网其它无关文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152