网页中的背景设计是相当重要的,尤其是对于个人主页来说,一个主页的背景就相当于一个房间里的墙壁地板一样,好的背景不但能影响访问者对网页内容的接受程度,还能影响访问者对整个网站的印象。如果你经常注意别人的网站,你应该会发现在不同的网站上,甚至同一个网站的不同页面上,都会有各式各样的不同的背景设计。究竟都有哪些不同样式的背景,还有它们的设计方法都是怎样的呢,现在就由我来为大家作一个比较完整的总结。

1.颜色背景

颜色背景的设计是最为简单的,但同时也是最为常用和最为重要的,因为相对于图片背景来说,它有无与伦比的显示速度上的优势。在网页文件中,一般通过

标签来指定页面的颜色背景,其HTML语法为:

其中的"color"表示不同的颜色,可以用各种不同的颜色表示方法,比较常用的有直接用颜色的英文名称,如blue、yellow、black等等,还可以用颜色的十六进制表示方法,如#0000FF、#FFFF00、#000000等等,此外还可以用百分比值法和整数法,其效果都是一样的。

颜色背景虽然比较简单,但也有不少地方需要注意,如要根据不同的页面内容设计背景颜色的冷暖状态,要根据页面的编排设计背景颜色与页面内容的最佳视觉搭配等等。

2.沙纹背景

沙纹背景其实属于图片背景的范畴,它的主要特点是整个页面的背景可以看作是局部背景的反复重排,在这类背景中以沙纹状的背景是为常见,所以我们将其统称为沙纹背景。

初学主页制作者都有这样的经历,当试图把自己的照片作为页面的背景是,却发现浏览器上显示出来的不仅仅是一个照片,而是同一照片在水平和竖直方向上的反复排列。这就是浏览器处理图片背景时的规律方法,利用这一规律我们可以用一小块图片作为页面背景,让它自动在页面上重复排列,铺满整个页面,从而使网页的体积大大减小。

读者到现在恐怕都已经知道了沙纹背景的原理和实现方法,就是找一个小的图片,越小越好,但注意要使最后的背景看起来要像一个整体,而不是若干图片的堆砌。其实现的HTML语法如下:

其中的"picture"表示背景图片的URL路径。

3.条状背景

条状背景与沙纹背景是比较相似的,它适用于页面背景在水平或竖直方向上看是重复排列的,而在另一方向上看则是没有规律的。它也是利用浏览器对图片背景的自动重复排列,与沙纹背景所不同的是它只让图片在一个方向上重复排列。

以在竖直方向上排列为例,首先用图像处理软件做一个从左到右为蓝白渐变的水平条状图片,其长度与页面的宽度相当。也通过

将其设为页面背景,经浏览器显示后,就成为整个页面从左到右蓝白渐变的分栏颜色背景。当然,也可以用类似的方法实现条状背景在水平方向上的重复排列。

4.照片背景

把自己或朋友的照片作为页面的背景让大家看到,是有点令人激动的事情,但浏览器对图片的自动重复排列却使这一愿望难以实现。怎么办呢?只有想不到的,没有做不到的,这里我们用上一点简单的CSS。在网页文件的

……之间加入下面的CSS语句:

这样,在网页页面中,就可以看到你的照片位于页面的正中间,而且在拉动浏览器窗口的滚动条时,照片仍然位于页面的正中间而不随页面内容一起滚动。如果你觉得照片位于页面的正中间不满意,你也可以随意地调整它在页面中的位置,只需要调整"background-position"的值就可以了。

5.复合背景

如果你在练习上面的“照片背景”时“不小心”也设置了

标签里的颜色背景,那么你看到了什么?颜色背景还起作用吗?对,你能看到你的照片浮于你设的颜色背景之上,二者能够同时正常地显示出来。这就是复合背景的魅力,更为吸引人的是,当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候,浏览器能够自动用你所设置的颜色背景取而代之。它的设计方法,就不用我再多说了吧!

6.局部背景

前面我们所说的背景都是整个页面的背景,能不能在页面上为某个局部的内容设置属于它自己的背景呢?回答是肯定的。

最为常见的是在表格的设计当中,我们可以为表格设置一个不同于页面的背景,甚至在不同的表格单元中,我们也可以设置各个表格单元自己的背景。请看下面这个表格例子:

在浏览器中的显示效果如图所示,可以看到,不但对于表格整个来说有不同于页面的背景,就是每一个单元格也可以设置各不相同的背景。

除此之外,我们还可以单独为某个文字段落设置背景,甚至为这个文字段落中的某几个文字设置自己的背景,是不是有点相当不错,这也需要用上一些CSS。请先看一下下面的这个例子:

不仅仅是页面的背景

记得毛主席有这么一首诗:"

坐地日行八万里,巡于遥看一千河。

"伟人就是了不起,……几万里就出去了。

在浏览器中的显示效果如图所示,现在是不是有点兴奋了,啊,原来文段也可以有自己的背景。只要你愿意,你就可以为页面的任何一个部分定义自己的背景,从而把页面打扮得更加漂亮和吸引人。

说到这,关于网页背景设计的问题也就说得大概也就差不多了,但新的网页制作技术也在不断涌现,说不定今天你看了这篇文章,明天就觉得它太过时了。笔者写这篇文章,目的是引起广大网页制作者对背景设计的注意,毕竟,背景对网页来说实在是太重要了,当然,网站还是要以内容为第一的。

html5设计页面背景颜色,网页背景设计全攻略相关推荐

  1. HTML5期末大作业:运动系列——NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成

    HTML5期末大作业:运动系列--NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成 临近期末 ...

  2. CSS控制背景颜色和背景图像的方法

    Web前端培训中比较重要的一环是网页的设计,网页能通过背景图像给人留下第一印象,如节日题材的网站一般采用喜庆祥和的图片来突出效果,所以在网页设计中,控制背景颜色和背景图像是一个很重要的步骤.下面将详细 ...

  3. HTML+CSS期末作业 :个人博客网站设计(2页) 学生网页课程设计期末作业下载 web网页设计制作成品

    HTML+CSS期末作业 :个人博客网站设计(2页) 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...

  4. css的背景颜色有哪些,css背景颜色、背景图片,以及列表的多种样式

    背景样式 • background-color 设置元素的背景颜色. • background-image 把图像设置为背景. • background-position 设置背景图像的起始位置. • ...

  5. html表格背景图片格式,css背景颜色、背景图片,以及列表的多种样式

    背景样式 • background-color 设置元素的背景颜色. • background-image 把图像设置为背景. • background-position 设置背景图像的起始位置. • ...

  6. CSS学习记录3.2/设置标签的背景颜色/控制背景图片的平铺方式/控制背景图片的位置/背景图片关联方式/背景图片和插入图片的区别/捕鱼达人背景练习/精灵图

    设置标签的背景颜色: CSS中的background-color:属性,就是专门用来设置标签.bc+table 设置背景图片: CSS中的background-image: url( );的属性就是设 ...

  7. Web前端,CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写

    前言 持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...

  8. CSS的背景(背景颜色,背景图片,背景平铺,背景图片位置,背景图片固定(图片附着),背景复合写法)

    CSS的背景 通过 CSS 背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色 background-color 定义元素的 ...

  9. Css的背景(背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定)

    通过css背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色: Background-color:#******: < ...

  10. CSS的背景属性设置(背景颜色、背景图片、背景平铺、背景附着、背景复合写法)

    文章目录 1 背景颜色 2 背景图片 3 背景平铺 4 背景图片位置 5 背景图像固定(背景附着) 6 背景复合写法 7 背景色半透明 8 背景总结 案例:五彩导航 通过CSS背景属性,可以给页面元素 ...

最新文章

  1. 合成生物学公司如何操纵微生物组
  2. [sh]top添加到crontab不生效问题解决
  3. 苹果系统从零开始--MAC OS X 教程1 -- Finder
  4. pandas如何统计所有列的空值,并转化为list?
  5. Visual studio 打包
  6. linux qt应用程序全屏,QT在ubuntu下实现界面全屏,侧边栏隐藏,上边栏隐藏【实例】...
  7. 驱动人生安装驱动计算机无法启动,驱动人生打开时出错怎么办
  8. IaaS、PaaS、SaaS、BaaS、FaaS、APaaS、IPaaS、IDaaS、DaaS
  9. 51NOD-1028 大数乘法V2【大数】
  10. sublime text 使用小技巧
  11. 【CS229机器学习】作业 Problem Set #1 有监督学习
  12. 形式语言与自动机 图灵机
  13. 医咖会免费SPSS免费教程学习笔记—灵敏度和特异度
  14. 攻防世界:logmein
  15. LabVIEW采集NI 9205多个通道数据,为什么切换时间比预想的长
  16. linux远程win7无法连接wifi,苹果电脑win7系统连不上wifi热点深度纯净
  17. 什么是用户token(令牌)-- 转
  18. 一个简单的Java Applet应用程序
  19. 《规范》前端编码规范
  20. 简书markdown

热门文章

  1. OC5022B内置MOS的开关降压型恒流驱动芯片
  2. nginx配置CSP策略和Nonce随机数方案
  3. Ubuntu+OpenCV学习汉字点阵,图片打印汉字
  4. 窗体泄露 WindowManager: android.view.WindowLeaked: Activity com.XXX.XXX.activity.XXXActivity has leaked
  5. 平面波超声成像 (Matlab Filed II仿真)
  6. 设计四位移位寄存器shifter_4
  7. 计算机免费证件照,完全免费!一键替换证件照背景色,再也不用花钱重新拍了...
  8. Java + OpenCV 实现更换背景色 (以 证件照 蓝色幕布替换成红色背景 为例)(JavaCV)
  9. sqlbulkcopy是覆盖式更新吗_关于5G消息,这五点你知道吗?
  10. 简单家用nas搭建,只需要这个路由器