北京三原色创意科技有限公司
  • 平面设计

  • 名片设计印刷

    标志

    企业画册

    折页

    海报

网站首页 >> 三原色日志 >>

CSS来控制网页背景

« CSS高度自适应,CSS背景自动延伸(2)CSS设计:百分比进行背景图片定位(转) »

CSS来控制网页背景

以前我们做网页背景是利用大背景图来做,现在利用CSS样式可以更好的定义控制网页的背景.特别是现在宽屏和传统的17"显示屏并用的情况下,我们好好利用CSS设计网页就更容易啦.

背景颜色 background-color 

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

CSS代码
  1. body{background-color:yellow}  
  2. H1{background-color:#000000}  

 背景图片 background-image

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

CSS代码
  1. body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF')}   
  2.   h1{background-image:url('none')}  

图片是否重复显示 background-repeat

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

CSS代码
  1. 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当你设置的值是负数的时候,则表示背景图片超出边界。

CSS代码
  1. body{background-image:url('file&:///C:/WINDOWS /BACKGRND.GIF');background-repeat:no-repeat;background-position:100px 10px}  

控制图片是否滚动 background-attachment

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

CSS代码
  1. body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');background-repeat:no-repeat;background-attachment:fixed}  

采用滤镜拉伸背景图

现在用宽屏和大分辨率的人都多了,而一般网页还是按照1024*768的分辨率来做的,这时候设置背景图片就出问题了,默认情况下是平铺的,如果需要改为拉伸的话,利用滤镜就可以啦.

CSS代码
  1. table1{  
  2.      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/counter_bg.jpg', sizingMethod='scale')  
  3. }  

背景图居中(宽屏中比较适用)

网页背景在宽屏中怎么居中

CSS代码
  1. body{background-positioncenter 50%;}  

可以不写上面的50%

background-position: center 50% top;  顶部为居中

CSS综合简化写法:

可以把以上的代码全部加在一起使用,也就是说把以上相关的代码加到background中。在把代码加到background中的时候要在每个值中间加上空格来隔开,而且不要把背景颜色的代码放在背景图片的URL后面,以免图片显示不出来。

CSS代码
  1. body{background:green url('file&:///C:/WINDOWS/BACKGRND.GIF'fixed 100px 50px no-repeat}  

 

以上信息整理理于以下网页:

 http://www.it.oaod.com/PcTech-7231.html

http://blog.csdn.net/unclefat/archive/2007/07/13/1688723.aspx

http://wenda.tianya.cn/wenda/thread?tid=55008e430d8029ae&clk=wttpcts

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

热门标签TagCloud

最新评论及回复

最近发表

Search

图标汇集

  • 订阅到抓虾
  • 订阅到鲜果
  • 订阅到飞鸽
  • 订阅到Google
  • 订阅到Yahoo雅虎
  • 订阅到Bloglines
  • 订阅到Gougou
  • 订阅到ROJO
  • 订阅到newsgator
  • 订阅到netvibes
  • RainbowSoft Studio Z-Blog
  • 本站支持WAP访问
  • 订阅本站的 ATOM 1.0 新闻聚合
  • 订阅本站的 RSS 2.0 新闻聚合

Powered By Z-Blog 1.8 Spirit Build 80710 Code detection by Codefense

Copyright 三原色创意 SYSCY.COM. Some Rights Reserved.