css怎样控制网页配景色彩

说到背景也就只要背景色彩和色彩图片，这两个我想大家必然都知道在里参加bgcolor="#808080"和background="URL"对吧，可是我这里将要介绍不是这样做的，而是用CSS样式来做的，虽说有些费事，可是团体配合还是很好的。

背景色彩 background-color

我想这个我就不消多做介绍了，色彩代码我想大家都知道的，不是用英文来代替就是用指定的代码来表示的。这个的默许值是transparent（透亮色）。例：

body{background-color:yellow} 
H1{background-color:#000000}

（引荐教程：CSS入门教程）

背景图片 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视频教程

以上就是css怎样操纵网页背景色彩的具体内容，更多请关注百分百源码网其它相关文章！