css样式教程---css控制背景图片-背景相关的css

最近做网站的时候,感觉css使用并不是那么轻松,于是从网上找了点教程看看,感觉还是挺重要的,一个好的CSS代码,只要你熟悉了,以后拿过来之间套上就行了, 真是方面,但是看的那CSS代码总叫人感觉头大,好好看看,最基础的教程吧,至少可以让你轻松一下,吻过而知心(温故而知新)
背景相关的css----css控制背景图片+鼠标指向背景改变颜色
背景颜色 background-color
·背景图片 background-image
·图片是否重复显示 background-repeat
  bcackground-repeat后面加上repeat-x(水平方向铺开)、repeat-y(垂直方向铺开)、repeat(两个方向铺开)。当然,它可以控制图片的重复,也可以控制图片不重复的。no-repeat这个就是用来表示只显示一幅背景图片,而不是重复出现的,这个可不是默认的哟,默认的是重复显示背景图片(repeat)。
·定位图片显示位置 background-position
  它就是用来显示图片相对于左上角的一个位置的(就是默认的值0% 0%),由两个值来设定,中间用空格来隔开。
·控制图片是否滚动 background-attachment
  scroll(静止)和fixed(滚动)

实例方法如下:

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

body{background-image:url(BACKGRND.GIF)}
h1{background-image:url(none)}

body{background-image:url(BACKGRND.GIF);background-repeat:no-repeat}

body{background-image:url(BACKGRND.GIF);background-repeat:no-repeat;background-position:100px 10px}

body{background-image:url(BACKGRND.GIF);background-repeat:no-repeat;background-attachment:fixed}

body{background:green url(BACKGRND.GIF) fixed 100px 50px no-repeat}

<table width="285" cellpadding="0" cellspacing="0" background="images/video_bg.jpg" bgcolor="#FFFFFF" style=" background-repeat:repeat-x; background-position:top ">

鼠标指向背景改变颜色

表格中:<td bgcolor="#eeeeee"     onMouseOver="this.bgColor='#ffffff';" onMouseOut="this.bgColor='#eeeeee';"><a href="default.asp">网站首页</a></td>

DIV中:<div onmouseover="this.id='bbb';" onmouseout="this.id='aaa';" id="aaa"><br />test<br /></div>

posted on 2008-06-13 09:13  9who  阅读(1378)  评论(0编辑  收藏  举报

导航