层叠样式表第2级 CSS2规范开发手册 - WEB前端开发 专注前端开发，关注用户体验

上一篇   下一篇   目录   属性   索引  

14 颜色和背景

    目录

    CSS属性允许作者指定一个元素的前景色和背景色。背景可以是颜色或图形。背景属性允许作者定位背景图形，重复它，并声明它是否应该相对于视点固定，还是和文档一起滚动。

    合法的颜色值的语法，参见颜色单位。

14.1 前景色：'color'属性

'color'
值：  <color> | inherit
初始值：  取决于用户端
适用于：  所有元素
可否继承：  可
百分比：  N/A
媒介：  图形

    该属性描述了一个元素的文本内容的前景颜色。有不同方法来指定红色：

例子：

     

EM { color: red }              /* 预先定义的颜色名 */
EM { color: rgb(255,0,0) }     /* RGB范围 0-255   */

14.2 背景

    作者可以指定一个元素的背景（即它的渲染表面）为一种颜色或一个图形。在包含框模型中，“背景”是指内容和边白区域的背景。边框颜色和样式由边框样式设定。边距总是透明的，因此父框的背景可以透过来。

    背景属性不可继承，但是父框的背景将缺省地透出来，这是因为'background-color'的缺省值为'transparent'。

    由根元素产生的框的背景覆盖整个渲染区域。

    不过，对于HTML文档，我们推荐作者指定BODY元素的背景而不是HTML的背景。用户端应该遵循如下的优先规则来填充背景：如果HTML元素的'background'属性取值不是'transparent'，那么使用该属性；否则使用BODY元素的'background'属性。如果结果为'transparent'，如何渲染未被定义。

    根据这些规则，下面的HTML文档下的渲染区域将有一个“大理石”的背景： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Setting the canvas background</TITLE>
    <STYLE type="text/css">
       BODY { background: url("http://style.com/marble.png") }
    </STYLE>
  </HEAD>
  <BODY>
    <P>My background is marble.
  </BODY>
</HTML>

14.2.1 背景属性：'background-color'，'background-image'，'background-repeat'，'background-attachment'，'background-position'及'background'

'background-color'
值：  <color> | transparent | inherit
初始值：  transparent
适用于：  所有元素
可否继承：  否
百分比：  N/A
媒介：  图形

    该属性设置了一个元素的背景色，或者是一个<color>值或者是关键字'transparent'，后者使其下的颜色能透出来。

例子：

     

H1 { background-color: #F00 }
'background-image'
值：  <uri> | none | inherit
初始值：  none
适用于：  所有元素
可否继承：  否
百分比：  N/A
媒介：  图形

    该属性指定了元素的背景图形。设置背景图形时，作者也应该同时设置一个背景色以考虑背景图形不可用的情况。如果背景图形可用，它在背景色之上得到渲染。（因此，在图形的透明区域，背景色是可见的。）

    该属性值要么是一个<uri>以指定图形，要么是'none'，即不使用图形。

Example(s):

     

BODY { background-image: url("marble.gif") }
P { background-image: none }
'background-repeat'
值：  repeat | repeat-x | repeat-y | no-repeat | inherit
初始值：  repeat
适用于：  所有元素
可否继承：  否
百分比：  N/A
媒介：  图形

    如果指定了一个背景图形，该属性指定图形是否重复（平铺），以及如何平铺。所有的平铺将覆盖一个框的内容区和边白区。取值的含义如下：

repeat
图形在水平和垂直方向重复。
repeat-x
图形只在水平方向重复。
repeat-y
图形只在垂直方向重复。
no-repeat
图形不重复：即只绘制了图形的一个拷贝。

例子：

BODY { 
  background: white url("pendant.gif");
  background-repeat: repeat-y;
  background-position: center;
}

    A centered background image, with copies repeated up and down the padding and content areas.   [D]

背景图形的一个拷贝居中，其它的拷贝放置在其上和其下，从而在元素后面产生了一个垂直的图形带。

'background-attachment'
值：  scroll | fixed | inherit
初始值：  scroll
适用于：  所有元素
可否继承：  否
百分比：  N/A
媒介：  图形

    如果设置了背景图形，该属性指定了图形是否相对视点固定（'fixed'）或随着文档滚动（'scroll'）。

    即使图形是固定的，它也只是在元素的背景和边白区域可见。因此，除非图形平铺（'background-repeat: repeat'），它可能是不可见的。

例子：

    本例创建了一个无限长的垂直图形带，当元素滚动时，它“粘”在了视点上。 

BODY { 
  background: red url("pendant.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

    用户端可以将'fixed'处理为'scroll'。不过，推荐的情况是它们正确地解释'fixed'，至少是对于HTML和BODY元素是如此，因为没有一种方法使一个作者只为那些支持'fixed'的浏览器提供一个图形。具体细节参见一致性。

'background-position'
值：  [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
初始值：  0% 0%
适用于：  块类和替换元素
可否继承：  否
百分比：  基于框本身的尺寸
媒介：  图形

    如果指定了一个背景图形，该属性指定了它的初始位置。取值的含义如下：

<percentage> <percentage>
如果取值为'0% 0%'，图形的左上角对齐该框的边白边的左上角。取值为'100% 100%'将图形的右下角对齐边白区域的右下角。取值为'14% 84%'，图形距左14%，距顶84%的点对齐边白区域中距左14%，距顶84%的点。
<length> <length>
取值为'2cm 2cm'，图形的左上角放置在距边白区域的左上角右2cm，顶2cm处。
top left及left top
同'0% 0%'。
top，top center及center top
同'50% 0%'。
right top及top right
同'100% 0%'。
left，left center及center left
同'0% 50%'。
center及center center
同'50% 50%'。
right，right center及center right
同'100% 50%'。
bottom left及left bottom
同'0% 100%'。
bottom，bottom center及center bottom
同'50% 100%'。
bottom right及right bottom
同'100% 100%'。

    如果只给出一个百分比或长度值，它只设置水平位置，垂直位置为50%。如果给出两个值，首先是水平位置。长度和百分比的混合组合是允许的（如，'50% 2cm'）。负的位置也是允许的。关键字不可以和百分比或长度值混用（所有可能的关键字组合已经在上面给出）。

例子：

BODY { background: url("banner.jpeg") right top }    /* 100%   0% */
BODY { background: url("banner.jpeg") top center }   /*  50%   0% */
BODY { background: url("banner.jpeg") center }       /*  50%  50% */
BODY { background: url("banner.jpeg") bottom }       /*  50% 100% */

    如果背景图形固定在视点中（参见'background-attachment'属性），图形相对于视点放置而不是相对于元素的边白区。例如，

例子：

BODY { 
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

    上例中，（单一）图形放置在视点的右下角。

'background'
值：  [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit
初始值：  对于缩写属性未指定
适用于：  所有元素
可否继承：  否
百分比：  允许用在'background-position'上
媒介：  图形

    'background'属性是在样式表的同一处设置个别背景属性的缩写属性（即，设置'background-color'，'background-image'，'background-repeat'，'background-attachment'及'background-position'）。

    'background'属性先设置所有的独立背景属性为它们的缺省值，然后赋予在声明中显式给出的值。

例子：

    下例的第一条规则，只给出了'background-color'一个值，而其它的独立属性设置为它们的初始值。第二个规则设置了所有的独立属性。 

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }

14.3 伽玛系数校正

    有关伽玛系数的信息，请参见PNG规范中的伽玛教程（[PNG10]）。

    计算伽玛校正时，显示在一个显示器上的用户端可以假定有一个理想的显示器而忽略任何由颜色抖动而引起的伽玛效果。这就意味着它们在当前平台上所需要做的最少的处理是：

使用MS-Windows的PC
没有
使用X11的Unix
没有
使用QuickDraw的Mac
伽玛系数为1.45 [ICC32]（能够ColorSync的应用程序可能简单地跳过sRGB ICC设置到ColorSync，以进行正确的色彩校正）
使用X的SGI
应用的伽玛值来自/etc/config/system.glGammaVal（缺省值为1.70；运行在Irix 6.2或更高版本上的应用程序可能简单地跳过sRGB ICC设置到颜色管理系统）
使用NeXTStep的NeXT
伽玛系数为2.22

    “应用伽玛”意味着对于每一个R/G/B，它们必须被转换到R'=Rgamma，G'=Ggamma，B'=Bgamma，然后再传递到操作系统。

    这一过程可以很快地完成。这是通过在每次激活浏览器时创建一个包含256个元素的查询表来完成的： 

for i := 0 to 255 do
  raw := i / 255.0;
  corr := pow (raw, gamma);
  table[i] := trunc (0.5 + corr * 255.0)
end

    这就避免了对于每一个颜色属性进行如此高深的数学运算，更不说对每一个像素点了。

    上一篇   下一篇   目录   属性   索引