·背景颜色 background-color
我想这个我就不用多做介绍了
颜色代码我想大家都知道
不是用英文来代替就是用指定代码来表示
这个默认值是transparent(透明色)例:body{background-color:yellow}
H1{background-color:#000000}
·背景图片 background-image
背景图片和背景颜色在HTML里面
设置也是基本相同都可以在里加入相关语句来完成但是在这里我所指并非是用这种思路方法我用思路方法还是CSSbackground-image这个主要功能也就是用来显示图片如果需要显示图片话那么只要在后面加上url(图片地址)就可以了不显示嘛那是最简单不过了什么也不要就行了
这个默认就是none而要加话就是在后面加上这个none就可以了例:
body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF)}
h1{background-image:url(none)}
大家在使用里
背景图片时
定常常遇到些图片太小而产生种种如图片重复出现而破坏了整个页面美感想换成其它图片又不合适的类麻烦情况吧不过现在好了大家只要用了以下几个CSS里控制图片思路方法那么你以后就不会再有此类麻烦事发生了·图片是否重复显示 background-repeat
有时候重复显示是需要
可是有时候重复显示则是让人头痛现在这个可以很好帮助你了而且它还可以帮你控制图片重复方式(水平方向重复、垂直方向重复以及两个方向都有重复)而要实现这 3个方向重复也就只要在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}
最后提醒
下大家如果用代码直接插入话那么定要放下面这个代码里后再放在的间才能正常显示出来！接下来我再介绍
下用DW4制作以上样式思路方法在DW中已经很详细列出各项来了具体作用我也介绍说明过了所以就简要介绍下吧只要大家能够明白就行了1.在此的前大家应该把CSS Styles这个窗口打开
如未打开话那么就按Sh
t+F11或者从Window下拉菜单中选择此项就可以了2.点击右键选择
style...这个选项或者点击下面带有+号图标3.在弹出
窗口中选择如下tag选择body我们上面介绍CSS样式都是有关body而在这里我也只是介绍这个里面background其它不要介绍内容的内；下面type选择第 2个；
也选择第 2个这样你呆会就可以在该文件中的间找到个了而这里面内容其实就是我上面介绍呵~_^4.点击OK后弹出
窗口才是最重要我的前已说过我们这次主要介绍是background这个选项所以在旁边窗口中选中它吧选中以后右边窗口将会变成和它相关设置项具体我在上面介绍过了大家只要参照上面介绍就可以完成了不过需要介绍说明下是在这个窗口中最下面两项其实就是background-position中水平方向垂直方向5.最后再点击OK就可以完成了
完成后你就可以在该页代码(View下Code选项)中找到它们了 
最新评论