如何用CSS来控制网页背景

转载 2007年09月22日 11:25:00
2007-09-14

  大家常常为一些比较合适于自己的网页背景的图片而发愁吧,因为这些图片不是太大就是太小,或者太乱,说到背景也就只有背景颜色和颜色图片,这两个大家一定都知道在里加入bgcolor="#808080"和background="URL"对吧,其实也可以用CSS样式来做的背景,整体配合还是非常不错的。

  ·背景颜色 background-color

  这个的默认值是transparent(透明色)。

以下是引用片段:
  例:body{background-color:yellow}
  H1{background-color:#000000}

  ·背景图片 background-image

  背景图片和背景颜色在HTML里面的设置也是基本相同的,都可以在里加入相关的语句来完成。但是在这里,所指的并非是用这种方法,我用的方法还是CSS。background-image这个的主要功能也就是用来显示图片,如果需要显示图片的话,那么只要在后面加上url(图片的地址)就可以了,不显示嘛,那是最简单不过的了,什么也不要就行了,因为这个默认的就是none,而要加的话,就是在后面加上这个none就可以了。

以下是引用片段:
  例:body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF')} 
  h1{background-image:url('none')}
 
  大家在使用里的背景图片时,一定常常遇到一些图片因为太小,而产生种种如图片的重复出现而破坏了整个页面的美感,想换成其它图片又不合适之类的麻烦情况吧。不过现在好了,大家只要用了以下的几个CSS里控制图片方法,那么你以后就不会再有此类的麻烦事发生了。

  ·图片是否重复显示 background-repeat

  有时候重复显示是需要的,可是有时候重复显示则是让人头痛的,现在这个可以很好的帮助你了,而且它还可以帮你控制图片重复的方式(水平方向重复、垂直方向重复以及两个方向都有重复),而要实现这三个方向的重复也就只要在bcackground-repeat后面加上repeat-x(水平方向铺开)、repeat-y(垂直方向铺开)、repeat(两个方向铺开)。当然,它可以控制图片的重复,也可以控制图片不重复的。no-repeat这个就是用来表示只显示一幅背景图片,而不是重复出现的,这个可不是默认的哟,默认的是重复显示背景图片(repeat)。

以下是引用片段:
例:body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');background-repeat:no-repeat}

  ·定位图片显示位置 background-position

  一张背景图片经过上面的设置后往往还不够的,因为当你使用上面的不重复显示设置后,图片只显示在页面的左上角,而不会在其它地方,可是如果要在中间或者其它地方出现这张背景图片的话,那么background-position这个就可以帮你了,因为它就是用来显示图片相对于左上角的一个位置的(就是默认的值0% 0%),由两个值来设定,中间用空格来隔开。它的主要的几个值有left|center|right和top|center|bottom,也可以用百分数值指定相对位置或用一个值来指定绝对位置,如50%表示的位置是在中心,而50px的水平值则表示图片距左上角区域水平移动50px单位;这里要特别指出的是,1当你设置值的时候只提供一个值,则相当于只指定水平位置,垂直自动设置为50%;2当你设置的值是负数的时候,则表示背景图片超出边界。

以下是引用片段:
  例:body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');background-repeat:no-repeat;background-position:100px 10px}

  ·控制图片是否滚动 background-attachment

  上面的两步可以帮你完成图像的定位,可是这样做好以后还不是完美的,因为如果你的页面有滚动条的时候,那么你这张背景图片就不会永远定位在那个位置了,如果想要图片永远定位在那个位置,就只有让这张图片随着页面的内容的滚动而滚动,这时background-attachment就可以帮你了你只要加入scroll(静止)和fixed(滚动)中的其中一个就可以了。当然不是让你乱加的,毕竟scroll是默认的,也就是不让图片随页面的内容而滚动的。

以下是引用片段:
  例:body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');background-repeat:no-repeat;background-attachment:fixed}

  好了,经过以上这番设置后,背景一定会更美的,但是过多的代码往往可读性很差,容易让人产生错误,所以在这里要告诉大家的就是可以把以上的代码全部加在一起使用,也就是说把以上相关的代码加到background中。在把代码加到background中的时候要在每个值中间加上空格来隔开,而且不要把背景颜色的代码放在背景图片的URL后面,以免图片显示不出来。

以下是引用片段:
  例:body{background:green url('file&:///C:/WINDOWS/BACKGRND.GIF') fixed 100px 50px no-repeat}

  最后提醒一下大家,如果用代码直接插入的话,那么一定要放下面这个代码的里后再放在之间才能正常显示出来!

 

 

CSS样式设置网页背景

首先我们要知道在HTML、CSS里面,有关背景的设置都与background有关,比如background-color:background-image:等 1、background-color属性...
  • qq_41377400
  • qq_41377400
  • 2017年12月16日 13:04
  • 60

使用视频作为网页背景的技术探讨

使用视频作为网页背景是件很酷的事情,但也是件困难的事情。CSS里的background-image属性只能使用图片、SVG、颜色或渐变色。但从技术讲,我们是可以伪造出一种效果,让视频以背景的角色出现在...
  • qq_15096707
  • qq_15096707
  • 2016年07月16日 13:06
  • 1040

完美的背景图全屏css代码 – background-size:cover?

在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域保持图像的纵横比(图片不变形)图片居中不出现滚动条多浏览器...
  • web_xiaoling_notes
  • web_xiaoling_notes
  • 2015年05月22日 19:29
  • 1118

CSS实现网页背景半透明

CSS实现网页背景半透明 使用DIV+CSS实现层与背景半透明效果。 说明:  1、filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代...
  • henrypt
  • henrypt
  • 2017年03月01日 00:22
  • 137

网页 div(背景)随鼠标成动态效果

前端时间我做学校运动会专题时,想让上面的奖杯随着鼠标微动。因为我在其它网页做专题时看到过这种效果,感觉看起来,非常炫,于是,想在美工的基础上增加上这个效果。于是上网查了些实现方法,经过我的对比觉得下面...
  • Ethen_Xie
  • Ethen_Xie
  • 2016年11月05日 19:42
  • 992

CSS设置页面背景色

CSS设置页面背景色           设置页面的背景色           CSS通过设置body标记的background-color属性来实现,背景色主要突出页面的主题,跟前景的文字颜色相...
  • nangeali
  • nangeali
  • 2016年10月23日 19:48
  • 1038

如何防止网页的背景图片重复 no-repeat

(1)现在一般都用css设定了,比如在一个div下设背景图片切不让其重复,则可设一个样式,比如: .nobgrepeat{background:url(背景图片地址) left top no-rep...
  • qq_30979185
  • qq_30979185
  • 2017年04月21日 07:55
  • 801

利用CSS、JQuery和div实现动态多级菜单

1、与前面不同,使用的CSS是class;前面的静态菜单使用的CSS是id方式。 我的菜单 div { margin:5px; padding: 5px; float:ri...
  • teamlet
  • teamlet
  • 2014年12月31日 00:02
  • 3711

css控制背景图片位置-background-position

最近经常给div在加背景图片的时候,发现背景图片的位置总是跟自己想要的效果不一样,所以就粗略的研究了一下,把结果和过程跟大家一起分享一下。现在就用div来举例子,其他的容器也都一样。主要来介绍一下背景...
  • Lycop
  • Lycop
  • 2016年04月30日 18:52
  • 1541

保护眼睛——设置WIN7和XP 窗体、Chrome、IE网页背景颜色

眼科医生建议电脑屏幕不要用白色,因为白色对眼睛的刺激是最大的,最损伤视力! 眼科医生推荐的颜色是柔和的淡绿色!也有人叫做绿豆沙色。只要稍微设置一下,就能让你电脑上的窗口从白花花的颜色变成淡淡的绿...
  • lanction
  • lanction
  • 2014年03月15日 10:00
  • 1246
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何用CSS来控制网页背景
举报原因:
原因补充:

(最多只允许输入30个字)