CSS教程之用CSS来把持网页背景
学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。<P>我想人人经常为一些对照符合于本人的网页背景的图片而忧愁吧，这个我想也是有的，由于这些图片不是太年夜就是太小，大概太乱，那末有无举措让图片能合本人的主页的胃口呢？谜底是一定的。
想晓得怎样来完成嘛，好吧，人人如今入手下手随着我做，我包管人人必定一学就会。不外，我想在网上“立室”的伴侣一样平常分为在网吧里“停业”（就像我一样，刚入手下手从别人的主页拉相干的代码来改的），另有就是在本人家里用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）。
例：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}
・把持图片是不是转动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:greenurl(file&:///C:/WINDOWS/BACKGRND.GIF)fixed100px50pxno-repeat}
最初提示一下人人，假如用代码间接拔出的话，那末必定要放上面这个代码的里后再放在之间才干一般显现出来！
如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人. 不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。
页:
[1]