标签归档：background

color属性设置的是标签内容的前景颜色(例如文本文字的颜色)。它的值可能是一种颜色名，也可能是一个十六进制的RGB组合，或一个十进制的RGB组合，如颜色属性值所述。下列内容都是有效的属性声明： color:mauve color:#ff7bd5 color:rgb(255, 125, 213) color:rgb(100%, 49%, 84%) 一般来说，我们会对文本使用color属性，但是也可以用color来修改标签中的非文本内容。例如，下面的示例将产生一条绿色的水平分隔线： b{color:green} 如果没有指定元素的颜色，它将继承其父元素的颜色。

在旅游网站建设过程中与制作各种字体属性一样，许多CSS2背景属性编写起来也非常麻烦，而且以后阅读时也会很困难。因此，与font属性一样，也要使用一个一般的background属性。 background属性能够以任何顺序接受任何或所有background-color、background-image、background-attachment、background-repeat和background-position属性的值。 如果没有为某些属性指定值，那些属性将被明确地设置为其默认值。因此：background-red可以将background-color属性设置为红色，并把其他背景属性重设为默认值。在下面这个更复杂的示例中：background:url(background/marble.gif)blue repeat-y fixed center 该代码一次设置了所有的背景图像和颜色属性，结果是在蓝色背景上放置了一个大理石图像(蓝色透过任何透明区域显示出来)。图像从内容显示区域的中央开始，在垂直方向上重复，而当用户滚动图像时，背景图像不会跟着滚动。 注意，我们只用了一个位置值(center)，浏览器将该值同时作为垂直和水平位置。 在上节背景的repeat属性中我们也详细的讲解了关于background简写的方法。

在css背景的img属性中我们提到了背景的background-repeat这一属性。这节我们将更详细的为您讲解他的相关写法。 在旅游网站建设过程中我们设定了背景图片后，浏览器通常会平铺背景图像来填充整个区域，也就是在水平和垂直方向上重复显示该图像。使用background_repeat属性可以改变这种”repeat(重复)”(默认值)行为。 如果要图像只在水平方向重复而垂直方向不重复，可使用repeat-x值。如果只想在垂直方向上重复，可使用repeat-y值。如果要禁止重复，可以使用no-repeat值。 这个属性的通常用法是在页面的背景上放置一个水印或标记，而不必一次又一次地重复这个图像。例如，下列代码将在页面中央的背景上放置一个不重复的水印图像： body { background-image: url(backgrounds/jiecool.gif); background-position: center center; background-repeat: no-repeat } 又如沿着页面的右边重复创建一条垂直的图片： body { background-image: url(backgrounds/jiecool.net.gif); background-position: top right; background-repeat: repeat-Y } 提示：在旅游网站建设CSS代码的编写中，我们可以简写整个背景定义的CSS代码。比如第一个不重复的水印图像，我们可以简写为： body {background: url(backgrounds/jiecool.gif) center center no-repeat;} 又如创建一条垂直的图片，我们可以简定为： body {background: url(backgrounds/jiecool.net.gif) top right repeat-Y;} 这样就大大减少了你在旅游网站制作中的CSS代码。

在默认情况下，能够识别样式的浏览器将从分配的显示区域的左上角开始放置背景图像，并将图像平铺(如果需要的话)至同一区域的右下角。使用background-position属性时，可以根据背景图像的默认位置，将其起始位置向下或向右移动一个绝对(长度)或相对(百分比或关键字)的偏移量距离。结果，该图像将从偏移的起始点开始填充，而且平铺(如果指定的话)会从该点开始由左向右，由上到下地填充显示空间。 可以为background-position属性指定一个或两个值。如果用的是一个值，它将同时应用于垂直和水平位置。如果是两个值，那么第一个值表示水平偏移，第二个值表示垂直偏移。对于在其后面显示背景图像的元素来说，长度值(使用的是其合适的单位，请参阅长度属性值)指明了相对于该元素左上角而言的绝对距离。 例如： table {background-image: url(backgrounds/marble.gif); background-position: 10px 20px} 上述代码以文档中任何<table>元素的左上角为基准，将大理石背景向右偏移了10个像素，向下偏移了 20个像素。 使用百分比值需要相对较多的技巧，但却更容易使用一些。从左到右、从上到下地以0%~100%的范围进行计算，结果是，元素的内容显示空间的中央位置是50%和50%。与此类似，这块区域的偏右三分之一和偏下三分之二分别是33%和66%。因此，以上面示例中的晚餐菜单为例，要将其移动到元素内容显示空间的中心。可以使用以下代码： background-position: 50% 50% 注意，浏览器把第一张marble.gif图像平铺在内容显示区域的中央，并向窗口的右下方面进行了平铺(注1)。 但是，如果只用一个词就可以达到同样的效果，为什么还要使用数字呢？因此，可以使用关键字left、center和right，以及top、center和bottom，它们分别代表0%，50%和100%。要将图像放在标签内容区域的中央位置，可以使用如下代码： background-position: center center 可以混合使用长度和百分比值，那么(注2)：background-position: 1cm center 这行代码将把图像放在标签左边缘向右的方向1厘米处，并在标签区域中垂直居中的位置。 注1：有趣的是，这个属性的用法符合Internet Explorer版本4和5的通告，在版本6和Netsacpe 6中却有所违背：只有设置了background-repeat属性后偏移才能奏效。 注2：也就是说，如果浏览器支持值的单位，就可以那样混合搭配。到目前为止，InternetExplorer和Netscape只支持很少的长度单位(像素和百分此)指令表。

background-image属性可以在元素内容后面放置一个图像。它的值可以是一个URL，也可以是默认值。 与背景颜色一样，也可以在整个文档后面，或者在文档中选中的元素后面放置一个背景图像。通过利用这个样式属性，比如在旅游网站建设中让表格或选中文本后面放置图像的效果： <table style=”background-image:url(backgrounds/jiecool.gif)”> li.marble {background-image: url(backgrounds/jiecool.gif)} 第一个示例用的是内联样式，将一个名为jiecool.gif的效果图像放在了表格后面。第二个示例定义了一个列表项目类，将一个名为jiecool.gif背景放在了使用class=abc属性的<li>标签后面。例如，下列示例是XHTML中的一段代码： <h2>杰酷免费旅游网站建设</h2> <ul> <li class=”abc”>为您提供专业的旅游网站建设</li> <li class=”abc”>为您提供专业的旅游网站制作</li> <li class=”abc”>为您提供专业的旅游网站模板</li> </ul> <h2>旅游网站制作</h2> <ul> <li>旅游网站制作列表内容1</li> <li>旅游网站制作列表内容2</li> </ul> 如果图像比包含元素大，它将被裁剪为与元素所占区域的大小相同。如果图像比该元素小，将重复使用该图像来填满元素所占的位置，background-repeat属性值指明了这一点。 例如在旅游网站建设中如果不想让背景图片重复来填满元素所占的位置，可以使用background-repeat: no-repeat;这段CSS来控制。如果只是想横行重复那么他的写法是：background-repeat: repeat-x;，纵像的写法是background-repeat: repeat-y;同时也可以用background-position属性来控制图像在元素内的位置。图像的滚动行为则由background-attachment属性管理。 当背景颜色和背景图像看起来不协调时，即使正在使用背景图像，通常也应该定义一种背景颜色。那样的话，如果图像不可用，例如，当用户不能自动下载图像时，浏览器会显示背景色来代替背景图像。此外，如果背景图像有透明区域，背景色可以用来填充那些区域。

attachment属性 如果为某元素指定了一个背景图像，可用background-attachment(背景附件)属性来控制图像链接到浏览器显示窗口的方式。如果使用默认值scroll，当用户在整个文档内滚动时，浏览器会随着元素移动背景图。fixed值则能防止图像的移动。目前大部分浏览器也都支持这个属性。 color属性 是控制元素的背景颜色，要将它设置为一个颜色值或关键字transparent(默认值)。其效果应该是透明的。 我们习惯于用<body>标签的特殊属性来为整个文档设置背景颜色，而backgroundcolor样式属性可以应用于任何元素。例如，要设置项目列表中某项的背景颜色，可以使用：<li style=”background-color:blue”> 同样，文档中所有表头的单元格可以用下面的代码来设定反白效果：th {background-color: black; color: white} 如果真的需要突出强调文本，并将其背景设定为红色，可以使用下列代码：em {background-color:red} Netscape的早期版本(版本6以前的版本)没有明确地支持CSS2属性，但是通过它支持的一般background属性也可以得到同样的效果。

文档中的每个元素都有一种前景颜色和一种背景颜色。在有些情况下，背景不是颜色，而是一幅色彩丰富的图像。color和background样式属性控制着这些颜色和图像。在旅游网站建设过程中css的背景属性被我们大量使用。比如旅游网站的头部导航背景、整个旅游网站的背景等等。可以这么说，只要是不用点击的图片都可以使用背景属性来制作。 HTML/XHTML元素的子元素通常会从它们的父元素那里继承前景颜色。例如，如果将<body>文本定为红色，能够识别样式的浏览器也将标题和段落文本显示为红色。 在旅游网站建设过程中需要注意的是，背景属性不能继承父元素的背景颜色。相反，每个元素都有一个默认的透明背景，允许父类背景透过其展现出来。这样，设置<body>标签的背景图像时，不会出现为<body>标签的每一个元素重新装载该图像的情况。反之，浏览器只加载一次图像，并在文档其余部分的后面显示它，这样，所有那些本身没有明确的背景颜色或图像的元素都会以该图像作为背景。