创星网络[分享知识传递快乐] › 门户 ›网页编程语言› HTML/CSS› CSS › 查看内容

CSS中background属性应用

2012-8-8 10:09| 发布者: cryinglily| 查看: 377| 评论: 0|原作者: luinstein

摘要: 这里和大家重点描述一下CSS中background属性应用，比如背景颜色和图片，背景图片和背景颜色在HTML里面的设置也是基本相同的，都可以在里加入相关的语句来完成。 CSS中background属性应用 ◆背景颜色background-color ...

这里和大家重点描述一下CSS中background属性应用，比如背景颜色和图片，背景图片和背景颜色在HTML里面的设置也是基本相同的，都可以在里加入相关的语句来完成。
  CSS中background属性应用
  ◆背景颜色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:100px10px}

复制代码

鲜花

握手

雷人

路过

鸡蛋

收藏分享邀请

		自动登录	找回密码
密码			立即注册

CSS中background属性应用

相关分类