学生网页设计中常用的简单设置网页背景图片方法

发布时间:2020-03-22   文章分类:网页技术课堂

1、从上到下渐变横向相同背景
渐变从上到下宽度全屏背景,这种网页背景只需要切出1像素宽,高度合适的图片作为背景素材。
CSS代码:body{background:#FFF url(bg.gif) repeat-x 0} 
代码解释:设置这个图片为背景图片靠网页顶部水平平铺,背景为白色。

2、不规律大图背景 
网页背景是一张大图片作为背景,宽屏和窄屏显示器都能显示铺满的全屏背景图片。这种网页首先要把背景图片制作为最宽显示屏分辨率宽度为2560像素 或者 1920像素即可。然后设置这样背景图片作为body背景后需要居中。
CSS代码:body{background: url(bg.jpg) no-repeat center 0} 
代码解释:设置这个图片为网页背景,通常不平铺(no-repeat),水平居中,靠上显示。

3、背景图按容器比例撑满
CSS代码:body {background-image: url(../img/bg.jpg);background-size:100%;}
这种方式设置的背景图片的大小,宽度会铺满整个盒子,高度自动,超出部分会隐藏,图片不会变形。

CSS代码:body {background-image: url(../img/bg.jpg);background-size:100% 100%;}
这种方式设置完背景图片的大小后,会完全铺满整个盒子,并且背景图片的比例会因此改变。

4、背景图片放大到适合元素容器的尺寸,图片比例不变
CSS代码:body {background-image: url(../img/bg.jpg);background-size:cover;}
把背景图片放大到适合元素容器的尺寸,图片比例不变,但是要注意,超出容器的部分可能会裁掉无法显示完整背景图像。
 
5、其他实用属性
background-attachment: fixed; 图片固定,随着页面滚动而移动
STU网页公众号

专注于Dreamweaver网页设计作业,大学生DW网页作业定制,HTML静态网页制作作业,简单网页作业成品模版免费下载,高中至大学一二三年级网站作业定制设计...