CSS 设置彩属性
任何美观的网页都离不开背景的修饰，以及丰富的彩。没有彩的网页是没有生机的，这就意味着一个优秀的网页设计者不仅要能够合理的安排页面布局，而且还要具有一定的彩视觉和彩的搭配能力，这样才能够使网页更加精美也具表现力，并给浏览者以亲切感。
现在，依赖CSS的强大功能，能够为页面增加在更加多样的彩及背景选择。并且能够统一页面元素的彩配置。
1、color属性
任何一个页面元素都具有color属性，该属性用于设置前景，并且常用来设置页面元素的字体颜。该属性的基本语法如下所示：
color:<颜>
该属性的初始值由浏览器决定。color属性值就可以使用下面三种设定方式：第一种是直接使用CSS中预置的标准名称，如red、blue等；第二种是使用十六进制颜，如#FF0000、#0000
FF等；第三种是使用RGB颜，如RGB(255,0,0)、RGB(0,0,255)等。
为了避免与用户的样式表之间的冲突，背景和颜属性应该始终一起指定。 | |
2、背景属性
通过设置背景来美化页面，常用的背景属性有：background-color属性、background-image属性、background-repeat属性、background-position属性、background-attachment属性和background属性。
（1）background-color属性用于设定背景。基本语法如下所示：
background-color: <值>
该属性所允许的值有任何有效的颜值或transparent (透明)。该属性的初始值为transparent (透明)。
同color属性一样，background-color属性接受，而对于没有设定背景的标记，采用透明（tranaparent）背景。背景颜属性设定一个元素的背景颜。例如:
BODY { background-color: white }
H1 { background-color: #000080 }
为了避免与用户的样式表之间的冲突，无论任何背景颜被使用的时候，背景图像都应该被指定。而大多数情况下，background-image: none都是合适的。网页制作者也可以使用略写的背景属性，通常会比背景颜属性获得更好的支持。
（2）background-image属性用于设定标记的背景图片，通常情况下，在标记<body>中应用，将图片用于整个主体中。
在设定背景图片时，最好同时也设定背景，这样当背景图片因某种原因无法正常显示时，可以使用背景来代替。当然，如果正常显示，背景图片会覆盖背景的。 | |
（3）background-repeat属性用于设定背景图片是否重复平铺。该属性有四种属性值：repeat、repeat-x、repeat-y和no-repeat，默认值为repeat，对属性值的概述如表4-3所示。
表4-3 background-repeat属性
属性值 | 描述 |
repeat | 背景图片水平和垂直方向都重复平铺 |
repeat-x | 背景图片水平方向重复平铺 |
repeat-y | 背景图片垂直方向重复平铺 |
no-repeat | 背景图片不重复平铺 |
background-repeat属性重复背景图片是从元素的左上角开始平铺，直到水平、垂直或全部页面都被背景图片覆盖。
（4）background-position属性用于指定背景图片在页面中所处的位置。该属性的属性值可以分为四类：绝对定义位置（length）、百分比定义位置（percentage）、垂直对齐值和水平对齐值。其中垂直对齐值包括top、center和bottom，水平对齐值包括left、center和right，
如表4-4所示。
表4-4 background-position属性的属性值
属性值 | 描述 |
length | 设置图片与边距水平与垂直方向的距离长度，后跟长度单位（cm、mm、px等） |
percentage | 以页面元素框的宽度或高度的百分比放置图片 |
top | 背景图片顶部居中显示 |
center | 背景图片居中显示 |
bottom | 背景图片底部居中显示 |
left | 背景图片左部居中显示 |
right | 背景图片右部居中显示 |
可以通过如图4-3所示的示意图说明background-position属性值在页面中的相对位置。
图4-3 background-position属性
从图中可以看出，垂直对齐值还可以与水平对齐值一起使用，从而决定图片的垂直位置和水平位置。
由于background-position属性是描述背景图片的位置的，所以必须与background-image属性同时使用，并且background-repeat属性值必须为no-repeat。 | |
使用垂直对齐值和水平对齐值只能格式化地放置图片，如果在页面中要自由地定义图片的位
置，则需要使用确定数值或百分比。例如，给出如下两条规则：
body {
background-image:url(3.jpg);
background-repeat:no-repeat;
background-position:20% 20%
}
body {
background-image:url(3.jpg);
background-repeat:no-repeat;
background-position:20px 30px
}
第一条规则表示图片的垂直位置与水平位置均相对于页面的20%放置，所以页面的大小决定了图片所处的位置；第二条规则表示图片的水平距离为20px，垂直距离为30px，该规则定义了图片的绝对位置。
background-position属性适用于HTML中的块标记及可替换标记，比如img、input、select等。 | |
（5）background-attachment属性可以实现图片始终在当前可视范围内出现，即随着滚动条的滚动而发生移动。该属性用来设定背景图片是否随文档一起滚动。该属性包含两个属性值：scroll和fixed，并适用于所有元素。其中scroll属性值为缺省值，当页面滚动时，背景图片随页面一起滚动；fixed属性设置背景图片固定在页面的可见区域里。
使用background-attachment属性，可以使背景图片始终处于视野范围内，以避免出现因页面的滚动而消失的情况。
一般来说，属性值为fixed是相对于可视范围而言的。无论页面如何滚动，图片始终处于可视范围之内，而页面中的元素内容则处于滚动状态。
（6）background属性综合了以上所有与背景有关的属性（即以back-ground-开头的属性），可以一次性地设定背景样式。格式如下：
background:[background-color] [background-image] [background-repeat]
[background-attachment] [background-position]
其中的属性顺序可以自由调换，并且可以选择设定。没有设定的属性，那么系统会自行为该属性添加缺省值。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论