CSSbackground之设置图⽚为背景技巧
⾸先先来看看background有那些值:
可以按顺序设置如下属性（可点击进⼊相应的css⼿册查看使⽤）：
background-color 背景颜⾊
background-image 背景图⽚
background-repeat 背景重复
background-attachment 背景图⽚是固定还是滚动
background-position 背景图⽚的定位
接下来我们重点来讲解css background通常的使⽤⽅法
⾸先我们来看下⾯⼀段代码
background:url(bgimg.gif) no-repeat 5px 5px;
如下图解释:
background:
森林动物图片
一年级手抄报background为符合属性.属性如下:
background:background-color ||background-image || background-repeat || background-attachment || background-position
border-style: none; margin-top: 5px; margin-bottom: 5px; color: rgb(0, 0, 0); font-family: 'black Verdana', Arial, Helvetica, sans-rif;">默认值:tansparent
取值描述(背景颜⾊)例⼦效果
transparent背景颜⾊透明 <div >
<span >span</span><br /> div
</div>
color 指定颜⾊
1.系统定义的颜⾊
3.#FFEE11
<div >和谐社会</div>
<div >和谐社会</div>
<div background-image:none">Background</div>
url(url)使⽤绝对或相对的url指定
背景图⽚
<div ></div>
background-repeat:
默认值:repeat
取值描述(背景平铺)例⼦效果
唐临repeat在横向和纵向上平
铺<div >
</div>
<div >
no-repeat不平铺<div > </div>
repeat-x在横向上平铺<div >
</div>
repeat-y在纵向上平铺<div >
</div>
background-attachment:
默认值:scroll
取值描述(背景滚动)例⼦效果
scroll跟随内容滚动<body >
</body>
随着滚动条的移动，可
能就看不到了.
隐藏窗口快捷键
fixed不论怎样滚动，始终固
定在页⾯上<body >
</body>
始终显⽰
background-position:
默认值:0% 0%
如果只指定了⼀个值，该值将⽤于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第⼆个值将⽤于纵坐标。
表达例⼦效果
竹林听雨background-position: length || length百合花简介
百分数 | 由浮点数字和单位标识符组成的长度值<div >
</div><br />
<div >
</div>
background-position:position||position
第⼀个position: top center bottom
第⼆个position: left center right <div >
</div><br />
<div >
</div>
属性名取值默认值background-position-x length/left/center/right0% background-position-y length/top/center/bottom
0%
⼀个⽹站上的图⽚或图标都在⼀张图⽚上的css制作⽅法：
安全剪刀1.CSS样式
议论文的论证方法1 .d1{width:13px;height:70px; border:#C00 1px solid;background:url(ex_icon.png) 0 0 no-repeat;}
2 .d2{width:13px;height:70px; border:#C00 1px solid;background:url(ex_icon.png) -14px 0 no-repeat;}
3 .e1{width:23px;height:70px; border:#C00 1px solid;background:url(ex_icon.png) -36px 0 no-repeat;}/*background:url(ex_icon.png) -36px(往右) 0(往下) */
4 .e2{width:23px;height:70px; border:#C00 1px solid;background:url(ex_icon.png) -61px 0 no-repeat;}
2.html代码
1<div class="d1"></div>
2<div class="d2"></div>
3
4<div class="e1"></div>
5<div class="e2"></div>
3.图⽚
