`
feiliboos
  • 浏览: 673043 次
文章分类
社区版块
存档分类
最新评论

CSS2样式表(属性·背景)

 
阅读更多
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"); }

分享到:
评论

相关推荐

    css(样式表属性)

    布局、字体、颜色、背景和其它效果实现更加精确的控制

    CSS常用样式表快速查询

    CSS样式表快速查询 CSS(Cascading Style Sheets),即层叠样式表,是一种用于控制网页样式和布局的标记语言。它可以将网页的内容和样式分离,使得网页的布局和样式变得更加灵活和可维护。 文本属性 CSS中文本...

    css2.0样式表中文手册

    **CSS2.0样式表中文手册** CSS,全称Cascading Style Sheets,是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。CSS2.0是其第二个主要版本,发布于1998年,它极大地增强了网页设计...

    CSS中文样式表

    **CSS中文样式表详解** CSS,全称Cascading Style Sheets,中文译为层叠样式表,是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。它能让你将样式规则从内容中分离出来,使网页设计...

    div CSS3动画带有的按钮_css3样式表属性动画按钮

    本主题将深入探讨“div CSS3动画带有的按钮”这一概念,以及如何利用CSS3样式表属性创建动态、吸引人的按钮。 首先,让我们了解一下“div”元素。在HTML中,div是一个通用的容器标签,用于组织和布局页面内容。通过...

    css2.0样式表中文手册.rar

    《CSS2.0样式表中文手册》是一本详细介绍CSS2.0规范的资源,对于学习和理解CSS2.0有着重要的指导意义。CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言,它...

    css3.0 样式表手册

    **CSS3.0样式表手册概述** CSS3.0(层叠样式表第三版)是Web设计者用来呈现HTML或XML(包括如SVG、MathML等各种XML方言)文档的样式语言。相较于CSS2.1,CSS3引入了大量新特性,以增强网页布局控制、动画效果、字体...

    CSS层叠样式表中文手册

    **CSS层叠样式表中文手册**是一份详细且全面的指南,旨在帮助用户理解和掌握...通过这份**CSS样式表中文手册**,无论是初学者还是经验丰富的开发者,都能找到所需的指导,提升CSS技能,打造更具吸引力和功能性的网页。

    CSS层叠样式表

    综上所述,CSS层叠样式表是构建网页样式的关键工具,它提供了丰富的选择器、布局模式以及动态效果,让网页设计变得丰富多彩。随着技术的不断发展,CSS3的更多新特性使得网页设计更加灵活,适应各种设备和场景。深入...

    CSS 2.0 样式表中文手册

    **CSS 2.0 样式表中文手册** CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。CSS 2.0是其第二个主要版本,它极大地扩展了CSS 1.0的功能,使网页...

    CSS样式表类型、背景、区块、方框、边框、列表、定位和扩展项.pdf

    1. **样式表类型**:CSS样式表主要有三种类型——内部样式表、外部样式表和内联样式。内部样式表是放在HTML文档部分的标签内;外部样式表是保存在单独.css文件中,通过标签引入;内联样式是直接在HTML元素中使用...

    CSS样式表中文手册教程(我见过最好的,共享了!)

    这个“CSS样式表中文手册教程”提供了全面的CSS知识,对于Web开发者来说是极有价值的资源。 首先,CSS的基础概念是至关重要的。它由选择器和声明组成,选择器定位要应用样式的元素,而声明则定义具体的样式规则。...

    CSS样式表帮助文档

    **CSS样式表帮助文档**通常包含以下主要内容: 1. **基本概念**:介绍CSS的基本术语,如选择器、属性、声明和规则集。选择器用于指定要应用样式的元素,属性定义了元素的特定样式,而声明由属性和值组成,形成规则...

    CSS2样式表中文手册(CHM版)

    **CSS2样式表中文手册** 是一份针对初学者的详尽资源,旨在帮助读者深入了解和掌握层叠样式表(Cascading Style Sheets)的第二版本。CSS2是Web设计领域中用于控制网页外观和布局的重要工具,它允许设计师将内容与...

    HTML——CSS样式表教程

    本教程将深入讲解CSS样式表的基本概念、语法以及实际应用。 **一、CSS基础** 1. **选择器与声明**:CSS通过选择器来定位HTML元素,并用声明来设置样式。例如,`p {color: red;}`选择所有段落并将其颜色设为红色。 ...

    CSS表格样式1

    在CSS(层叠样式表)中,表格样式是网页设计中的一个重要组成部分,它能帮助我们打造出美观且功能丰富的数据展示区域。这篇博文“CSS表格样式1”可能详细讲解了如何利用CSS来定制HTML表格的外观和布局。由于描述中...

    《CSS 样式表中文手册》 ,样式表基础学习教程

    2. **属性**:属性定义了元素的视觉特性,如`color`(颜色)、`font-size`(字体大小)、`background-color`(背景色)等。 3. **声明**:属性和值以冒号分隔,每条声明以分号结束。例如,`color: blue;`声明文本...

    CSS2样式表使用手册-css用户必备

    《CSS2样式表使用手册》是一本专门为CSS用户编写的必备参考资料,旨在帮助读者全面理解和掌握CSS2(层叠样式表第二级)的核心概念、语法和应用技巧。CSS2是网页设计的重要技术,用于控制网页元素的外观和布局,使得...

    形考任务五 使用 元素以及CSS样式表对下面的内容进行的布局设计.zip

    2. **CSS样式表简介** CSS(Cascading Style Sheets)是用于控制网页外观和布局的样式语言。它可以改变字体、颜色、间距、布局和更多视觉效果。在本任务中,我们将用CSS来定义`<div>`的样式,以实现特定的布局设计...

    CSS2 样式表中文手册

    **CSS2样式表中文手册** CSS(Cascading Style Sheets)是用于控制网页元素呈现方式的一种语言,CSS2是其第二个主要版本,于1998年发布。这个中文手册是为网页设计师和开发者提供的一份详尽参考资料,旨在帮助他们...

Global site tag (gtag.js) - Google Analytics