CSS2样式表(属性·背景)

原创 2007年09月28日 15:15:00
1、background
 

语法:
background : background-color || background-image || background-repeat || background-attachment || background-position
取值:
该属性是复合属性。请参阅各参数对应的属性。
默认值为:transparent none repeat scroll 0% 0%。

说明:
设置对象的背景样式。
如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
例如:设置 background : white 等于设置 background : white none repeat scroll 0% 0% 。如果在此之前设置了 background-image 属性,则其设置将被 background-image 的默认值 none 覆盖。
背景样式属性的作用区域为对象的内容区域与内补丁( padding )区域。不包括边框( border )与外补丁( margin )区域。尽管该属性不可继承,但如果未指定,其父对象的背景颜色和背景图将在对象下面显示。
对应的脚本特性为 background 。

示例:

div { background: red no-repeat scroll 5% 60%; }
body { background: url("images/aardvark.gif") repeat-y; }
pre { background: url("images/aardvark.gif") top; }
caption { background: fuchsia; }

2、background-attachment
 

语法:
background-attachment : scroll | fixed
取值:
scroll : 默认值。背景图像是随对象内容滚动
fixed : 背景图像固定

说明:
设置或检索背景图像是随对象内容滚动还是固定的。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
请参阅 bgProperties 属性(特性)。对应的脚本特性为 backgroundAttachment 。


示例:

html { background-image: url("anasazi.tif"); background-attachment: fixed; }
body { background-attachment: scroll; }

 

3、background-color
 

语法:
background-color : transparent | color
取值:
transparent : 默认值。背景色透明
color : 指定颜色。请参阅 颜色单位 和 附录:颜色表

说明:
设置或检索对象的背景颜色。
当背景颜色与背景图像( background-image )都被设定了时,背景图片将覆盖于背景颜色之上。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 backgroundColor 。

示例:

p { background-color: silver }
div { background-color: rgb(223,71,177) }
body { background-color: #98AB6F }
pre { background-color: transparent; }

4、background-image
 

语法:
background-image : none | url ( url )
取值:
none : 默认值。无背景图
url ( url ) : 使用绝对或相对 url 地址指定背景图像

说明:
设置或检索对象的背景图像。
当背景图像与背景颜色( background-color )都被设定了时,背景图片将覆盖于背景颜色之上。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 backgroundImage 。


示例:

code { background-image: url("comet.jpg"); }
blockquote { background-image: url("c:/InetPub/MyPixs/comet.jpg"); }
br { background-image: url(http://Fred.com/ImageFile/Q.gif); }
body { background-image: none; }

5、background-position
 

语法:
background-position : length || length
background-position : position || position
取值:
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位
position : top | center | bottom | left | center | right

说明:
设置或检索对象的背景图像位置。必须先指定 background-image 属性。
该属性定位不受对象的补丁属性( padding )设置影响。
默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值,第二个值将用于纵坐标。
如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位。
对应的脚本特性为 backgroundPosition 。



示例:

div { background: url("images/aardvark.gif"); background-position: 35% 80%; }
menu { background: url("images/aardvark.gif"); background-position: 35% 2.5cm; }
a { background: url("images/aardvark.gif"); background-position: 3.25in; }
body { background: url("images/aardvark.gif"); background-position: top right; }

6、background-position-x
 

语法:
background-position-x : length | left | center | right
取值:
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位
left : 居左
center : 居中
right : 居右

说明:
设置或检索对象的背景图像横坐标位置。必须先指定 background-image 属性。
该属性定位不受对象的补丁属性( padding )设置影响。
默认值为: 0% 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 backgroundPositionX 。



示例:

p { background-image: url("images/aardvark.gif"); background-position-x: 35%; background-repeat:no-repeat; }

7、background-position-y
 

语法:
background-position-y : length | top | center | bottom
取值:
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位
top : 居顶
center : 居中
bottom : 居底

说明:
设置或检索对象的背景图像纵坐标位置。必须先指定 background-image 属性。
该属性定位不受对象的补丁属性( padding )设置影响。
默认值为: 0% 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 backgroundPositionY 。


示例:

div { background-image: url("images/aardvark.gif"); background-position-y: 35%; background-repeat:no-repeat; }

8、background-repeat
 

语法:
background-repeat : repeat | no-repeat | repeat-x | repeat-y
取值:
repeat : 默认值。背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像仅在横向上平铺
repeat-y : 背景图像仅在纵向上平铺

说明:
设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像( background-image )。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 backgroundRepeat 。



示例:

menu { background: url("images/aardvark.gif"); background-repeat: repeat-y; }
p { background: url("images/aardvark.gif"); background-repeat: no-repeat; }

9、layer-background-color
 

语法:
layer-background-color : transparent | color
取值:
transparent : 默认值。背景色透明
color : 指定颜色。请参阅 颜色单位 和 附录:颜色表

说明:
设置或检索对象整个区域的背景颜色。



示例:

div { layer-background-color: transparent; }

10、layer-background-image
 

语法:
layer-background-image : none | url ( url )
取值:
none : 默认值。无背景图
url ( url ) : 使用绝对或相对 url 地址指定背景图像

说明:
设置或检索对象整个区域的背景图像。



示例:

code { position: absolute; top: 100px; left: 300px; width: 200px; border: thin solid black; background-image: url("comet.jpg"); layer-background-image: url("bb_comet.jpg"); }

 

 

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

域名重定向的解决方案(2)

在这里介绍下第二种方案,自己架设DNS,将域名进行重定向到自己架设的局域网网站上。 DNS服务器用的是MaraDNS(官网:http://www.maradns.org/,) web服务器用的是a...

关于jquery获取元素高度、height、scrollTop等问题,更新。。。

1、是看这边资料的:http://www.365mini.com/page/jquery-scrolltop.htm 当一个区域设置了over-flow-y:scroll,选择的li不在可视区,怎么...

不用css样式表和背景图片实现圆角矩形,超简洁!

当网站页面的整体布局设计好后,接下来有很多细节的实现是很让人头疼的。其中之一就是圆角矩形的实现。 在网上看了很多圆角矩形的实现方法,基本有两种,一种是用纯css实现,不需要背景图片;另一种是用背...
  • aerchi
  • aerchi
  • 2012年03月31日 13:13
  • 2505

css样式表和选择器的优先级以及position元素属性值的区别

css样式表和选择器的优先级以及position元素属性值的区别

HTML默认样式表CSS属性

开始的时候 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了。以前一直在找这份 文档,今天偶然在w3上看到了。除了inline和block的定义,主...

css样式表基本属性1

html中关于css的简介及相应的方法

CSS层叠样式表属性(按照功能分类)

CSS3 动画属性(Animation) 属性 描述 CSS @keyframes 规定动画。 3 animation 所有...

CSS样式表中a:link,a:visited,a:hover,a:active属性

CSS样式表中a:link,a:visited,a:hover,a:active属性含义a:link,a:visited,a:hover,a:active 分别是什么意思,有什么用途 明了的:  ...

web学习—css样式表—css属性(一)

前面也已经学了css的基本语法。但是,我们仍然还是没法实际应用,因为对于前边提到的三种选择符,比较好理解,但是对于声明部分就比较困难了,最主要的原因还是我们知道了它的格式,可是具体声明的属性是什么呢?...
  • ni_meri
  • ni_meri
  • 2012年08月19日 15:54
  • 564

web学习—css样式表—css属性(二)

5、鼠标效果属性: cursor属性:定义鼠标的样式。取值如下:               auto: 正常鼠标。               crosshair: 十字鼠标。 ...
  • ni_meri
  • ni_meri
  • 2012年08月24日 16:51
  • 1282
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS2样式表(属性·背景)
举报原因:
原因补充:

(最多只允许输入30个字)