第二章:第10节 CSS背景属性

更新于:2016-12-11 20:55:02

1.png


一个页面默认是白色的,可我们总会看到网上页面什么颜色都有,这个页面就是设置了背景属性。前面学HTML的时候楠神说过,在页面里显示一张图片,除了用<img />标签,还可以用背景属性显示一张图片。


常用的几个背景属性:

Background-color:背景颜色 background-color:#f0f0f0;

Background-image:背景图片。background-image:url(images/bg.gif)

Background-repeat:背景平铺,取值:no-repeat(不平铺)repeat-x(水平方向)repeat-y(垂直方向)repeat(平铺)

Background-position:背景定位。

background-position:水平方向(leftcenterright)  垂直方向(topcenterbottom)

background-position:center  center;  /*水平和垂直都居中*/

background-position:left   center;   /*水平左对齐,垂直居中*/

background-position:50%  50%;   /*水平和垂直都居中*/

background-position:0px  10px;  /*距离左边0px,距离顶端10px*/

简写的方式

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方式比较方便。


本节学习代码》》》