2008-07-20
CSS中background的用法
CSS中 background 是一个很基本的而且比较常用的样式
background : background-color || background-image || background-repeat || background-attachment || background-position
这个是 background 的几个参数,这些参数并不是都要写上的。
background-color: 背景颜色,这里可以写英文,可以写RGB,可以写#xxxxxx
transparent : 背景色透明
background-image:背景图片,只能写 none 或者 url (url)
background-repeat:背景图象的平铺
repeat : 背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
background-attachment:背景图象的流动性
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
background-position :背景图象的位置
length : 百分数 | 由浮点数字和单位标识符组成的长度值。
position : top | center | bottom | left | center | right
background-position 这个参数很有意思,一般可能很少人用到,不过这个参数理解好了,确实有很大的用处,首先background-position有2个参数:background-position:(X Y),这个一般有2种情况,一个是div比背景图片大,则用这个属性背景图片会在div里浮动,如div比背景图片小,那么就变成了背景图片的变幻,具体的用代码说明吧。
这个是做的一个圆角的div,
<div style="width:700px">
<div style="padding-left:8px; background:transparent url(img/corners.gif) no-repeat;">
<div style="background:transparent url(img/corners.gif) no-repeat right -8px; padding-right:8px;">
<div style="height:8px;background:transparent url(img/tb.gif) repeat-x 0 0;" ></div>
</div>
</div>
<div style="padding-left:4px; background:transparent url(img/l.gif) repeat-y;">
<div style="padding-right:4px;background:transparent url(img/r.gif) repeat-y right;">
<div style="background:#eee url(img/tb.gif) repeat-x 0 -16px;">fdsafasdfasd<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf</div>
</div>
</div>
<div style="padding-left:8px; background:transparent url(img/corners.gif) no-repeat 0 -16px;">
<div style="background:transparent url(img/corners.gif) no-repeat right -24px; padding-right:8px;">
<div style="height:8px;background:transparent url(img/tb.gif) repeat-x 0 -8px;" ></div>
</div>
</div>
</div>
background : background-color || background-image || background-repeat || background-attachment || background-position
这个是 background 的几个参数,这些参数并不是都要写上的。
background-color: 背景颜色,这里可以写英文,可以写RGB,可以写#xxxxxx
transparent : 背景色透明
background-image:背景图片,只能写 none 或者 url (url)
background-repeat:背景图象的平铺
repeat : 背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
background-attachment:背景图象的流动性
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
background-position :背景图象的位置
length : 百分数 | 由浮点数字和单位标识符组成的长度值。
position : top | center | bottom | left | center | right
background-position 这个参数很有意思,一般可能很少人用到,不过这个参数理解好了,确实有很大的用处,首先background-position有2个参数:background-position:(X Y),这个一般有2种情况,一个是div比背景图片大,则用这个属性背景图片会在div里浮动,如div比背景图片小,那么就变成了背景图片的变幻,具体的用代码说明吧。
这个是做的一个圆角的div,
<div style="width:700px">
<div style="padding-left:8px; background:transparent url(img/corners.gif) no-repeat;">
<div style="background:transparent url(img/corners.gif) no-repeat right -8px; padding-right:8px;">
<div style="height:8px;background:transparent url(img/tb.gif) repeat-x 0 0;" ></div>
</div>
</div>
<div style="padding-left:4px; background:transparent url(img/l.gif) repeat-y;">
<div style="padding-right:4px;background:transparent url(img/r.gif) repeat-y right;">
<div style="background:#eee url(img/tb.gif) repeat-x 0 -16px;">fdsafasdfasd<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf</div>
</div>
</div>
<div style="padding-left:8px; background:transparent url(img/corners.gif) no-repeat 0 -16px;">
<div style="background:transparent url(img/corners.gif) no-repeat right -24px; padding-right:8px;">
<div style="height:8px;background:transparent url(img/tb.gif) repeat-x 0 -8px;" ></div>
</div>
</div>
</div>
- 01:29
- 浏览 (107)
- 评论 (0)
- 分类: CSS+JavaScript
- 相关推荐
发表评论
- 浏览: 14086 次
- 性别:

- 来自: 天津

- 详细资料
搜索本博客
我的相册
0be92b64-8320-3c0c-9365-4b33d8931699.jpg
共 2 张
共 2 张
最近加入圈子
链接
最新评论
-
JavaFX初识
不是你写的话,能不能把原始出处加上呢?
-- by metaphy -
关于offsetTop的疑问
IE中你改div的border设为1,padding设为10pxoffsetTo ...
-- by axers -
一个可以拖拽的DIV
恩 对 当时忘了FF了。。。 等我改一下吧
-- by fastwind -
一个可以拖拽的DIV
经检测,在FF中N多的问题,改进了在帖出来吧
-- by hejin1026 -
关于offsetTop的疑问
看来这里的搞CSS人比较少啊!~~ 不过问题已经解决了!~~
-- by fastwind






评论排行榜