CSS--背景(Background)

it2024-11-13  12

background:

background为符合属性.属性如下:

background:background-color ||background-image || background-repeat || background-attachment || background-position

 

background-color:

默认值:tansparent

取值描述(背景颜色)例子效果transparent背景颜色透明 <div style="background-color:Aqua"> <span style="border:solid 1px black">span</span><br /> div </div> color指定颜色1.系统定义的颜色2.rgb(100,100,100)3.#FFEE11 <div style="background-color:Silver">和谐社会</div> <div style="background-color:rgb(100,200,90)">和谐社会</div> <div style="background-color:#ff11f6">和谐社会</div>

 

background-image:

默认值:none

取值描述(背景图片)例子效果none没有背景图片 <div style="background-image:none">Background</div> url(url)

使用绝对或相对的url指定背景图片

<div style="background-image:url('del.gif')"></div>

 

background-repeat:

默认值:repeat

取值描述(背景平铺)例子效果repeat在横向和纵向上平铺 <div style="background-image:url('del.gif'); background-repeat:repeat"> </div> no-repeat不平铺<div style="background-image:url('del.gif'); background-repeat:no-repeat"> </div> repeat-x在横向上平铺<div style="background-image:url('del.gif'); background-repeat:repeat-x"> </div> repeat-y在纵向上平铺<div style="background-image:url('del.gif'); background-repeat:repeat-y"> </div>

 

background-attachment:

默认值:scroll

取值描述(背景滚动)例子效果scroll跟随内容滚动<body style="background-image:url('del.gif'); background-repeat:no-repeat; background-attachment:scroll"> </body>随着滚动条的移动,可能就看不到了.fixed不论怎样滚动,始终固定在页面上<body style="background-image:url('del.gif'); background-repeat:no-repeat; background-attachment:fixed "> </body>始终显示

 

background-position:

默认值:0% 0%

如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值,第二个值将用于纵坐标。

表达例子效果background-position: length || length百分数 | 由浮点数字和单位标识符组成的长度值<div style="background-image:url('del.gif'); background-position:10px 10px; background-repeat:no-repeat"> </div><br /> <div style="background-image:url('del.gif'); background-position:50% 50%; background-repeat:no-repeat"> </div> background-position:position||position第一个position: top center bottom第二个position: left center right <div style="background-image:url('del.gif'); background-position:left center; background-repeat:no-repeat"> </div><br /> <div style="background-image:url('del.gif'); background-position:center center; background-repeat:no-repeat"> </div>

 

属性名取值默认值background-position-xlength/left/center/right0%background-position-ylength/top/center/bottom0%

 

layer-background-color:

取值描述例子效果transparent背景色透明  color指定颜色  

转载于:https://www.cnblogs.com/oneword/archive/2009/06/05/1496993.html

最新回复(0)