📄 colors.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html lang="en"><HEAD><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><TITLE>Colors and backgrounds</TITLE><link rel="stylesheet" href="style/default.css" type="text/css"><link rel="prev" href="page.html"><link rel="next" href="fonts.html"><link rel="contents" href="cover.html#minitoc"><link rel="CSS-properties" href="propidx.html" title="properties"><link rel="index" href="indexlist.html" title="index"></HEAD><BODY><div class="navbar" align="center"><p><a href="page.html">previous</a> <a href="fonts.html">next</a> <a href="cover.html#minitoc">contents</a> <a href="propidx.html">properties</a> <a href="indexlist.html">index</a> </div><hr class="navbar"><H1 align="center">14 Colors and Backgrounds</H1><div class="subtoc"><p><strong>Contents</strong> <ul class="toc"> <li class="tocline2"><a href="colors.html#colors" class="tocxref">14.1 Foreground color: the <span class="propinst-color">'color'</span> property</a> <li class="tocline2"><a href="colors.html#q2" class="tocxref">14.2 The background</a> <ul class="toc"> <li class="tocline3"><a href="colors.html#background-properties" class="tocxref">14.2.1 Background properties: <span class="propinst-background-color">'background-color'</span>, <span class="propinst-background-image">'background-image'</span>, <span class="propinst-background-repeat">'background-repeat'</span>, <span class="propinst-background-attachment">'background-attachment'</span>, <span class="propinst-background-position">'background-position'</span>, and <span class="propinst-background">'background'</span></a> </ul> <li class="tocline2"><a href="colors.html#gamma-correction" class="tocxref">14.3 Gamma correction</a> </ul></div><P>CSS properties allow authors to specify the foreground color andbackground of an element. Backgrounds may be colors orimages. Background properties allow authors to position a background image,repeat it, and declare whether it should be fixed with respectto the <a href="visuren.html#viewport">viewport</a> or scrolledalong with the document.<P> See the section on <a href="./syndata.html#color-units">color units</a>for the syntax of valid color values. <H2>14.1 <a name="colors">Foreground color</a>: the <a href="colors.html#propdef-color" class="noxref"><spanclass="propinst-color">'color'</span></a> property</H2><div class="propdef"><dl><dt><span class="index-def" title="'color'"><a name="propdef-color" class="propdef-title"><strong>'color'</strong></a></span><dd><table class="propinfo" cellspacing=0 cellpadding=0><tr valign=baseline><td><em>Value:</em> <td><a href="syndata.html#value-def-color" class="noxref"><span class="value-inst-color"><color></span></a> | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a><tr valign=baseline><td><em>Initial:</em> <td>depends on user agent<tr valign=baseline><td><em>Applies to:</em> <td>all elements<tr valign=baseline><td><em>Inherited:</em> <td>yes<tr valign=baseline><td><em>Percentages:</em> <td>N/A<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a></table></dl></div><P> This property describes the foreground color of an element's textcontent. There are different ways to specify red:<div class="example"><P style="display:none">Example(s):</P><P><PRE>EM { color: red } /* predefined color name */EM { color: rgb(255,0,0) } /* RGB range 0-255 */</PRE></div><H2><a name="q2">14.2 The background</a></H2><P>Authors may specify the background of an element (i.e., itsrendering surface) as either a color or an image. In terms of the <ahref="box.html#box-model">box model</a>, "background" refers tothe background of the <ahref="box.html#box-content-area">content</a> and the <ahref="box.html#box-padding-area">padding</a> areas. Border colorsand styles are set with the <ahref="box.html#border-properties">border properties</a>. Marginsare always transparent so the background of the parent box alwaysshines through.<P>Background properties are not inherited, but the parent box'sbackground will shine through by default because of the initial'transparent' value on <a href="colors.html#propdef-background-color" class="noxref"><spanclass="propinst-background-color">'background-color'</span></a>.<P>The background of the box generated by the root element covers theentire <a href="intro.html#canvas">canvas</a>. <P>For HTML documents, however, we recommend that authors specify thebackground for the BODY element rather than the HTML element. Useragents should observe the following precedence rules to fill in thebackground: if the value of the <a href="colors.html#propdef-background" class="noxref"><spanclass="propinst-background">'background'</span></a> property for the HTMLelement is different from 'transparent' then use it, else use thevalue of the <a href="colors.html#propdef-background" class="noxref"><span class="propinst-background">'background'</span></a>property for the BODY element. If the resulting value is'transparent', the rendering is undefined.<div class="html-example"><P>According to these rules, the canvas underlying the following HTML document will have a "marble" background:<PRE><!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></PRE></div><H3>14.2.1 <a name="background-properties">Background properties</a>: <a href="colors.html#propdef-background-color" class="noxref"><spanclass="propinst-background-color">'background-color'</span></a>, <a href="colors.html#propdef-background-image" class="noxref"><spanclass="propinst-background-image">'background-image'</span></a>, <a href="colors.html#propdef-background-repeat" class="noxref"><spanclass="propinst-background-repeat">'background-repeat'</span></a>, <a href="colors.html#propdef-background-attachment" class="noxref"><spanclass="propinst-background-attachment">'background-attachment'</span></a>,<a href="colors.html#propdef-background-position" class="noxref"><spanclass="propinst-background-position">'background-position'</span></a>, and<a href="colors.html#propdef-background" class="noxref"><span class="propinst-background">'background'</span></a></H3><div class="propdef"><dl><dt><span class="index-def" title="'background-color'"><a name="propdef-background-color" class="propdef-title"><strong>'background-color'</strong></a></span><dd><table class="propinfo" cellspacing=0 cellpadding=0><tr valign=baseline><td><em>Value:</em> <td><a href="syndata.html#value-def-color" class="noxref"><span class="value-inst-color"><color></span></a> | transparent | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a><tr valign=baseline><td><em>Initial:</em> <td>transparent<tr valign=baseline><td><em>Applies to:</em> <td>all elements<tr valign=baseline><td><em>Inherited:</em> <td>no<tr valign=baseline><td><em>Percentages:</em> <td>N/A<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a></table></dl></div><P>This property sets the background color of an element, either a<span class="index-inst" title="<color>"><a name="x2" href="syndata.html#value-def-color" class="noxref"><spanclass="value-inst-color"><color></span></a></span> value or the keyword'transparent', to make the underlying colors shine through.<div class="example"><P style="display:none">Example(s):</P><P><PRE>H1 { background-color: #F00 }</PRE></div><div class="propdef"><dl><dt><span class="index-def" title="'background-image'"><a name="propdef-background-image" class="propdef-title"><strong>'background-image'</strong></a></span><dd><table class="propinfo" cellspacing=0 cellpadding=0><tr valign=baseline><td><em>Value:</em> <td><a href="syndata.html#value-def-uri" class="noxref"><span class="value-inst-uri"><uri></span></a> | none | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a><tr valign=baseline><td><em>Initial:</em> <td>none<tr valign=baseline><td><em>Applies to:</em> <td>all elements<tr valign=baseline><td><em>Inherited:</em> <td>no<tr valign=baseline><td><em>Percentages:</em> <td>N/A<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a></table></dl></div><P> This property sets the background image of an element. Whensetting a background image, authors should also specify a backgroundcolor that will be used when the image is unavailable. When the imageis available, it is rendered on top of the background color. (Thus,the color is visible in the transparent parts of the image).<P>Values for this property are either <span class="index-inst"title="<uri>"><a name="x4" href="syndata.html#value-def-uri" class="noxref"><spanclass="value-inst-uri"><uri></span></a></span>, to specify theimage, or 'none', when no image is used.<div class="example"><P style="display:none">Example(s):</P><P><PRE>BODY { background-image: url("marble.gif") }P { background-image: none }</PRE></div><div class="propdef"><dl><dt><span class="index-def" title="'background-repeat'"><a name="propdef-background-repeat" class="propdef-title"><strong>'background-repeat'</strong></a></span><dd><table class="propinfo" cellspacing=0 cellpadding=0><tr valign=baseline><td><em>Value:</em> <td>repeat | repeat-x | repeat-y | no-repeat | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a><tr valign=baseline><td><em>Initial:</em> <td>repeat<tr valign=baseline><td><em>Applies to:</em> <td>all elements<tr valign=baseline><td><em>Inherited:</em> <td>no<tr valign=baseline><td><em>Percentages:</em> <td>N/A<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a></table></dl></div><P>If a background image is specified, this property specifies whetherthe image is repeated (tiled), and how. All tiling covers the <ahref="box.html#box-content-area">content</a> and <ahref="box.html#box-padding-area">padding</a> areas of a box.Values have the following meanings:</p><dl><dt><strong>repeat</strong><dd>The image is repeated both horizontally and vertically.<dt><strong>repeat-x</strong><dd>The image is repeated horizontally only.<dt><strong>repeat-y</strong><dd>The image is repeated vertically only.<dt><strong>no-repeat</strong><dd>The image is not repeated: only one copy of the image is drawn.</dl><div class="example"><P style="display:none">Example(s):</P><P><PRE>BODY { background: white url("pendant.gif"); background-repeat: repeat-y; background-position: center;}</PRE><div class="figure"><p><img src="images/bg-repeat.gif" alt="A centered background image,with copies repeated up and down the padding and content areas."><SPAN class="dlink"> <A name="img-bg-repeat" href="images/longdesc/bg-repeat-desc.html" title="Long description for background pattern">[D]</A></SPAN><p class="caption">One copy of the background image is centered, andother copies are put above and below it to make a vertical band behindthe element.</div></div>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -