一个页面默认是白色的,可我们总会看到网上页面什么颜色都有,这个页面就是设置了背景属性。前面学HTML的时候楠神说过,在页面里显示一张图片,除了用<img />标签,还可以用背景属性显示一张图片。
常用的几个背景属性:
l Background-color:背景颜色 background-color:#f0f0f0;
l Background-image:背景图片。background-image:url(images/bg.gif)
l Background-repeat:背景平铺,取值:no-repeat(不平铺)、repeat-x(水平方向)、repeat-y(垂直方向)、repeat(平铺)
l Background-position:背景定位。
u background-position:水平方向(left、center、right) 垂直方向(top、center、bottom)
u background-position:center center; /*水平和垂直都居中*/
u background-position:left center; /*水平左对齐,垂直居中*/
u background-position:50% 50%; /*水平和垂直都居中*/
u background-position:0px 10px; /*距离左边0px,距离顶端10px*/
l 简写的方式
u background:url(images/bg.gif) no-repeat left center;
不做演示了,直接下载楠神提供的代码研究下。
注意的地方:楠神目前都是把CSS代码写到HTML页面里,在实际运用中,CSS代码是非常多的,所以是写到CSS文件里,HTML页面再引用。背景图片的网络地址如果是相对的,要以CSS代码所在的文件物理地址去填写图片地址。例如:
文件夹public里style.css、a.jpg,style.css要把a.jpg做背景属性,就需要这样写background-image:url(./a.jpg),所有的HTML页面引入style.css文件,都可以被这个属性影响到。
如果给页面加背景色用background-color就可以,如果用图片做背景用简写的background方式比较方便。