了解css技术基础之css设置背景

除了使用颜色设置背景,还可以使用图片设置背景。使用图片作为网页元素的背景,就涉及图片的位置和重复方式。使用Css样式能精确地控制背景图片的位置和重复方式。

使用css提供的 background-imge属性可以直接为页面元使用 background-image属性的通用语法：

background-image:url(pic.jpg)

使用 background-image属性插入背景图片,只需使用url直接链入所需要使用的背景图片即可。其中 pic.jpg就是所使用的背景图片。设置body的 background-image属性就能为整个网页设置背景图。举例说明：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 

< html xmlns="http://www.w3.org/1999/xhtml" > 

< head > 

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / > 

< title >设置网页元素的背景颜色< /title > 

< style > 

body{ background-image:url(bg.gif);}/*设置网页整体背景图片为bg.gif*/ 

< /style > 

< body > 

< /body > 

< /html >

在默认的情况下，使用body的background-image属性设置背景图片时，所使用的图片无论大小都会重复地平铺整个网页。若要改变背景图片的重复方式，就要使用background-repeat属性。

其通用方式为： 

background-repeat:repeatmode，其中repeatmode有以下四种属性可供选择： 

repeat:背景图仔纵向和横向上平铺。 

no-repeat：背景图片不平铺。 

repeat-x：背景图在横向上平铺。                    

repeat-y：背景图在纵向上平铺。

举例说明：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 

< html xmlns="http://www.w3.org/1999/xhtml" > 

< head > 

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / > 

< title >设置背景图片的重复方式< /title > 

< style > 

div{ background-image:url(bg.gif); /*设置dv标签背景图片为bg.gif*/ width:200px; height:200px; /*设置div标签的高度和宽度都为200像素*/ float:left; /*设置div标签向左浮动*/ border:1px solid #666; /*设置div标签的边框为1像素灰色实线*/ margin:5px;}/**设置div标签的四边边距为5像素*/ 

div#one{ background-repeat: repeat;}/*设置第一个div标签背景图在纵向和横向上平铺*/ div#two{ background-repeat:no-repeat;}/*设置第二个div标签背景图不平铺*/ 

div#three{ background-repeat:repeat-x;}/*设置第三个div标签背景图在横向上平铺*/ 

div#four{ background-repeat:repeat-y;}/*设置第四个div标签背景图在纵向上平铺*/ 

< /style > 

< /head > 

< body > 

< div id="one" >1< /div > 

< div id="two" >2< /div > 

< div id="three" >3< /div > 

< div id="four" >4< /div > 

< /body > 

< /html >

默认情况下，background-repeat的属性为repeat。

若设置背景图的 background- repeat为no- repeat,背景图出现在网页元素的左上角。若设置 background-repeat为其他重复值,背景图也是从左上角开始平铺。在默认情况下,背景图总是出现在页面元素的左上角。CSS提供 background-position属性用于改变背景图与页面元素的相对位置。其属性的通用语法:

background-position：positio, 

其中, position值可以使用长度单位、百分比值和关键字来设定。 

使用任何长度单位都能设置背景图与页面元素的位置。通常情况下使用像素作为单位，在设置 background-position属性的时候都要设置两个数值，代码如下: 

background-position: 10px 20px 

第一个10px代表背景图与其所在的页面元素的横向相对位置为10像素;第二个20px代表背景图与其所在的页面元素的纵向相对位置为20像素。也就是说背景图沿着x轴方向向右推移10像素;沿着y轴方向向下推移20像素。 

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 

< html xmlns="http://www.w3.org/1999/xhtml" > 

< head > 

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / > 

< title >使用长度单位设置背景图的位置< /title > 

< style > 

div{ background-image:url(picture.jpg);/*设置div标签背景图片为picture.jpg*/ width:200px; height:200px;/*设置div标签的高度和宽度都为200像素*/ float:left;/*设置div标签向左浮动*/ border:1px solid #666;/*设置div标签的边框为1像素灰色实线*/ margin:5px;/*设置div标签的四边边距为5像素*/ } 

div#one{ background-position:0px 0px;}/*设置第一个div标签背景图的左上角与（0,0）重合*/ 

div#two{ background-position:50px 100px;}/*设置第一个div标签背景图的左上角与（50,100）重合*/ 

div#three{ background-position:100px 100px;}/*设置第一个div标签背景图的左上角与（100,100）重合*/ 

div#four{ background-position:200px 200px;}/*设置第一个div标签背景图的左上角与（200,200）重合*/ 

< /style > 

< /head > 

< body > 

< div id="one" >1< /div > 

< div id="two" >2< /div > 

< div id="three" >3< /div > 

< div id="four" >4< /div > 

< /body > 

< /html >

使用百分比设置背景图的位置与使用单位设置背景图的位置的方法类似，把长度单位改为百分比符号就可以了。

background-position:30% 30%                  

但是设置10px和10%的意义并不相同，假设背景图的宽高均为40px；背景图所在的页面元素宽高均为300px。设置background-position第一个值为30%就代表，背景图的30%的位置和页面元素30%的位置对齐。背景图40px X30%=12px，页面元素300px X30%=90px。也就是说，背景图沿x轴方向12像素的位置和页面元素沿x轴方向90像素的位置对齐，对于background-position第二个百分比值也是如此。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns="http://www.w3.org/1999/xhtml" >

< head>

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >

< title >使用百分比设置背景图的位置< /title >

< style >

div{ background-image:url(picture.jpg);/*设置div标签背景图片为picture.jpg*/

width:300px; height:300px;/*设置div标签的高度和宽度都为300像素*/

float:left;/*设置div标签向左浮动*/

border:1px solid #666;/*设置div标签的边框1像素灰色实线*/

margin:5px;/*设置div标签的四边边距为5像素*/

}

div#one{ background-repeat:no-repeat;/*设置背景图片为不重复，位置为30%*/

 background-position:30% 30%/*设置背景图位置为30%*/

 }

< /style >

< /head >

< body >

< /body >

< /html >

设置background-position属性的关键字有六个，横向上有三个关键字分别为left、center、right；纵向上也有三个关键字分别是top、center、bottom。如要设置背景图和其所在的页面元素的右下角对齐代码如下：

background-position: right bottom 

设置横向关键字为left，就相当于设置百分比为0%；背景图位于页面元素的x轴的最左边，设置center就相当于设置百分比为50%，背景图位于页面元素的x轴的中心，设置right就相当于设置百分比为100%。背景图位于页面元素的x轴最右侧，对于纵向上的三个关键字也是如此。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns="http://www.w3.org/1999/xhtml">

< head>

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >

< title >使用关键字设置背景图的位置< /title >

< style >

div{ width:150px; height:150px;

float:left;

border:1px solid #666;

margin:5px;

background-image:url(picture.jpg);

background-repeat:no-repeat;}

div#one{ background-position:left top}

div#two{ background-position:left center}

div#three{ background-position:left bottom}

div#four{ background-position:center top}

div#five{ background-position:center center}

div#six{ background-position:center bottom}

div#seven{ background-position:right top}

div#eight{ background-position:right center}

div#nine{ background-position:right bottom}

< /style >

< /head >

< body >

< div id="one" >left/top< /div >

< div id="two" >left/center< /div >

< div id="three" >left/bottom< /div >

< div id="four" >center/top< /div >

< div id="five ">center/center< /div >

< div id="six" >center/bottom< /div >

< div id="seven" >right/top< /div >

< div id="eight" >right/center< /div >

< div id="nine" >right/bottom< /div >

< /body >

< /html >

当一个网页的页面超过浏览器的窗口时，该页面右侧就会产生滚动条。用户在拖动滚动条时，就能浏览到页面下方的内容。在拖动时会发现网页的背景也会跟着改变。若要实现当拖动滚动条时，背景不移动就需要使用css提供的background-attachment属性。

background-attachment属性只有两个值，分别是scroll和fixed，默认属性值为scroll。 

scroll:背景图是随对象内容滚动。 

fixed：背景图固定。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns="http://www.w3.org/1999/xhtml" >

< head>

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >

< title >固定背景图< /title >

< style >

body{ background-image:url(picture.jpg);/*设置网页的背景图为picture.jpg*/

background-position:top right;/*设置网页的背景图位置为右上角*/

background-repeat:no-repeat;/*设置网页的背景图不重复*/

background-attachment:fixed;}/*设置网页的背景图固定在网页中*/

p{ font-size:14px;/*设置文字大小为14像素*/

line-height:24px;/*设置文字行高为24像素*/

text-indent:28px;/*设置文字首行缩进28像素*/

color:#F00;}/*设置文字颜色为红色*/

< /style >

< /head >

< body >

< p >浙江网盛生意宝股份有限公司（股票代码：002095，以下简称生意宝）是一家专业从事互联网信息服务、电子商务、专业搜索引擎和企业应用软件开发的高新企业。公司总部位于“电子商务之都”杭州，从化工行业B2B起家，目前已发展成为国内领先的行业电子商务运营商和综合B2B运营商。< /p >

< p >2006年12月，生意宝在获中国证监会审核通过后顺利实现IPO，受到证券市场的热烈追捧，这意味着“国内纯互联网第一股”的诞生，自此，生意宝也扛起了自主创新与民族互联网创业的“大旗”，并由此改写了我国十余年资本市场和互联网产业的历史。公司上市具有重大的现实意义与历史意义，也正因为如此，生意宝上市被载入了我国互联网产业与资本市场的发展史，是中国近几年来少有的几家民族的开创性的上市互联网企业。< /p >

< p >生意宝及其旗下子公司现有员工1000逾人，本身拥有一支由博士、硕士、学士组成的层次合理的运营团队，并先后在北京、上海、青岛、济南、南京、无锡、成都、广州、郑州、石家庄、沈阳、武汉、太原、长沙、厦门、韩国首尔、美国西雅图、荷兰等地余地设立了分支机构，形成遍布全国、辐射全球的市场营销与服务体系，是当今国内屈指可数的大型互联网企业。

< /p >

< p >生意宝公司曾先后承担“国家发改委化工行业电子商务应用工程”、“全国电子信息推广应用项目”‘“浙江省软件产业发展计划项目”，“浙江省经贸委推进流通企业电子商务进程项目”，“浙江省信息产业科技、新产品试制计划项目”“杭州市第一批高技术产业化项目”等一大批国家省市级重点项目。享受国家发改委电子商务专项资金，浙江省软件发展专项资金及浙江省信息服务业发展专项资金等，被浙江省科技厅认定为“浙江省高新技术企业”，被批准为“杭州高新技术产业开发区软件产业园企业”；通过“软件企业认证”；被杭州企业信用评级委员会评定为“AAA级企业”。< /p >

< p >上市后，网盛生意宝团队开启了第二次创业。在过去的六年多时间里，公司团队依靠着自己的努力、智慧和毅力克服了一个又一个困难，基本完成公司新战略的布局既“电商、数据、金融三大战略。< /p >

< /body >

< /html >

在上述的background-images、background-position、background-repeat、background-attachment属性可以使用background属性进行缩写，其代码为：

background-images:url(picture.jpg); 

background-position:top right; 

background-repeat:no-repeat; 

background-attachment:fixed

可以缩写成为：background:url(picture.jpg) top right no-repeat fixed