CSS控制⽹页背景颜⾊的代码
我想⼤家常常为⼀些⽐较合适于⾃⼰的⽹页背景的图⽚⽽发愁吧，这个我想也是有的，因为这些图⽚不是太⼤就是太⼩，或者太乱，那么有没有办法让图⽚能合⾃⼰的主页的胃⼝呢？答案是肯定的。
想知道怎么来实现嘛，好吧，⼤家现在开始跟着我做，我保证⼤家⼀定⼀学就会。不过，我想在⽹上“成家”的朋友⼀般分为在⽹吧⾥“开业”（就像我⼀样，刚开始从他⼈的主页拉相关的代码来改的），还有就是在⾃⼰家⾥⽤DW或FP之类的专业软件制作好上传的，所以呢，我打算分开两步介绍，⾸先为在⽹吧⾥“开业”的朋友着想吧，最后再简要的介绍⼀些⽤DW4做的背景样式。
其实总得说来⼀切都是⼀样的，只不过是采⽤的⽅式不同罢了。好了闲话少说了，现在就⼊正题吧。
说到背景也就只有背景颜⾊和颜⾊图⽚，这两个我想⼤家⼀定都知道在⾥加⼊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）。例：
css简单网页代码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控制⽹页背景颜⾊的代码的详细内容，更多关于css ⽹页背景请关注其它相关⽂章！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论