css背景素材-怎么修改网页背景代码

第一种:一个固定大小的div,直接把图片当做背景,div里加文字、图片,然后微调

第二种:把圆角也当做内容,纯代码写出圆角,然后排版,可以实现任何浏览器的兼容,而且div大小随意,圆角颜色都可以设置(需要我可以写一个例子)

第三种:切出四个角,然后当做内容进行排版

(个人建议:第二种,代码冗余比较多,但是丝毫不影响,而且没有图片的内存后,速度也是杠杠的)

那么在网站制作过程中,我们需要哪些素材呢? 网站制作常用的素材:背景图片、图标、动画图片等等。 一、背景图片 CSS控制背景图片:对于一个网页,我们开始设计的时候,可能没有过多的去想背景图到底是什么,因为大多都是设计背景色就可以了,因为它与前景音乐一样,对于网页的打开,速度会有一定的影响。不过对于一般的个人网站,或者个人博客而言,它对展现自己的个性,当然是不可或缺的了。控制背景图片的CSS属性有很多,只要与图片的相关的,大多都会用的上。 1、为网页设计背景图片的代码是:body {background:url("d:\images\")}或者body {background-image:url("d:\images\")}。这样的话,我们就能将想要作背景的图片导进网页里了。 2、显示原始图片大小:body {background:url("d:\images\");background-repeat:no-repeat} 3、控制图片大小:body{background-image:url("d:\images\");width:350px;height:350px;} 二、图标 图标是具有指代意义的具有标识性质的图形,它不仅是一种图形,更是一种标识,它具有高度浓缩并快捷传达信息、便于记忆的特性。图标可以使用各种不同的格式BMP ,PSD ,GIF , JPEG ,WMF ....所有这些格式有几种不同的属性(点阵图,向量,压缩,分层,动画... ),可以用来存储图片,和决定任何大小。 三、gif图片 gif图片图片是图片的一种形式,gif图片可以达到一定程度的Flash效果,这就有利于搜索引擎优化,也可以是网站看上去更加美观。 网站制作素材可以有效的提高网站的整体风格,增加网站的视觉效果,可以提高网站的浏览量,吸引客户的眼球,让他流连忘返,很难在离开你的网站。素材的运用,要能结合网站的主题和需要表达的意境而定,好的素材能起到画龙点睛的作用。

一、网页单色背景 - TOP

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

body{background:#FFF}

设置网页背景为白色

二、规律背景图片 - TOP

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

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

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

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

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

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

2、水平平铺类背景图片

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

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

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

三、不规律大图背景 - TOP

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

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

假如这张背景图片为:

设置CSS代码:

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

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

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

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

1、头部和版权图片

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

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

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

2、网页靠顶部上背景图与固定底部靠下背景图

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

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

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

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

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

html{background: url() no-repeat center 0} body{background: url() no-repeat center bottom}