如何设置html中的背景图像

摘要： 除了设置背景颜色之外，你还可以使用body元素的background属性设置网页的背景图像。background的值应当是一个GIF或JPEG文件的URL，通常位于网站的图像目录中；

    除了设置背景颜色之外，你还可以使用<body>元素的background属性设置网页的背景图像。background的值应当是一个GIF或JPEG文件的URL，通常位于网站的图像目录中；例如，<body background="images/tile.gif">。这个属性值也可以简单地设置为其他网站上的图像的完整URL，但这远不如使用自己网站的图像实用。background所指定的图像将在页面内平铺，以作为网页的背景图案，这既可能实现也有可能破坏网页的设计。例如，如果一个人使用 background 属性把一幅 200×300 像素的小狗图像放在他的主页上，这个小狗图像将在网页背景上平铺，这会让小狗的主人很高兴——但却使得网页难以阅读。图6-10展示了一个烦人的平铺背景的例子。

图6-10 重复的背景图像
     通常情况下，使用复杂的背景图像并不是一个好的设计决定，使用精细的图像可能反而造成相反的结果。有些设计者试图创建浅色的背景，如水印纹理，他们认为如同在纸张上一样，这样将创作出漂亮的网页效果。然而问题在于，在许多显示器上，这样的背景图像可能难以辨认，这些背景纹理甚至可能让人看不清背景上的文字。同设置背景颜色相同，设置背景图像时最重要的考虑因素也是对比度，应当总是让前景和背景保持较高的对比度，使用户能够方便地阅读网页信息。如果没有人能够阅读网页，一个优秀的页面布局又有什么用呢？
    如果网页需要一个背景，可以使用 Photoshop 这样的图像处理程序来创建无缝平铺背景，如图6-11所示。

图6-11 无缝平铺背景图像
    网页背景图像也可以用来创建其他的效果。例如，一个5像素高，1600像素宽的GIF图像就能够创作出有用的网页布局，这个GIF图像的前200个水平像素是黑色，而其他的像素均为白色。假设1600像素是一个浏览器的最大宽度，则这个图像将只在网页中纵向平铺，这将创作出一个分为两栏的背景效果。这种方法在网络上已经得到了普遍的采用，很多网站把左侧的颜色用作导航按钮，而把其余的区域用来显示文本，如图6-12所示。然而，要确保内容出现在背景图像上的正确区域，你必须使用表格。在你尝试使用这样的网页设计之前，请务必先熟读本书的下一章。

图6-12 使用平铺背景图像（水平GIF）的边栏布局
在使用背景平铺来分割屏幕时，一定要多加小心。例如，许多人试图创建竖直分割的网页布局，如图6-13所示。

图6-13 使用平铺背景图像(竖直GIF)的布局
    然而，这种布局存在着一个问题。这个黑色横条难道不会重复吗？完全可能，因为我们难以决定网页内容的长度。访问者们将可能发现这个黑色横条一再重复，从而导致顶部的内容丢失。这个问题的解决方法之一是把用于平铺的背景图像设置得很高，但这并不仅仅只是增大了文件的大小，还带来了另一个问题：要多高才够呢？因为各个网页的内容都不同，而且网页上的内容会随着时间的过去而增减，要决定这一点几乎是不可能的。同样的问题也会出现在边栏风格的平铺背景中。在任一种情况下，都可以使用样式表来解决平铺背景的问题，因为它们能够设置背景图像平铺的方向和频率，这将在第10章中讨论。有几种HTML特定的解决方案可以解决这些以及其他的背景布局问题，我们在这里只是简单的接触。
     注意：背景平铺的另一个问题在于，一些设计者总是试图把图像文件的大小和下载时间控制到最低限度。例如，设计者可能会把背景图像的高度设置为只有一个像素，这可能会导致屏幕绘制问题，因为这时，图像平铺的次数将与屏幕的高度（单位为像素）相同，需要数百次。在较慢的显卡上，如此大的计算量可能会带来麻烦。为了避免这样的背景绘制问题，我们应当平衡物理文件的大小以及下载时间。所以根据所使用的色彩数量，一幅背景图像的高度能够被设置为5像素或者更高。如果图像使用的色彩控制在最低限度，那么把图像高度设置为 20 或 30像素也没有问题。

Font的属性详细解析	CSS样式中几个常用的度量单位
一个完整的css样式表范例	css样式的继承性
样式中伪类和伪元素的使用实例	网站样式中class命名规则
网页中id的命名规则	常用的几个创建样式规则的方法
网页布局中div和span使用有什么不	如何使用CSS行内样式

如何设置html中的背景图像

Tags： html教程 背景

Tags： html教程背景