默认情况下,您的网页背景为白色.你可能不喜欢它,但不用担心. HTML为您提供了两种装饰网页背景的好方法.
带背景的HTML背景
带图像的HTML背景
现在让我们使用适当的例子逐一查看这两种方法.
bgcolor 属性用于控制HTML元素的背景,特别是页面正文和表背景.
注意 : HTML5中不推荐使用 bgcolor 属性.不要使用此属性.
以下是将bgcolor属性与任何HTML标记一起使用的语法.
<tagname bgcolor = "color_value"...>
此color_value可以采用以下任何格式给出 :
<!-- Format 1 - Use color name --> <table bgcolor = "lime" > <!-- Format 2 - Use hex value --> <table bgcolor = "#f1f1f1" > <!-- Format 3 - Use color value in RGB terms --> <table bgcolor = "rgb(0,0,120)" >
以下是设置HTML标记背景的示例 :
<!DOCTYPE html> <html> <head> <title>HTML Background Colors</title> </head> <body> <!-- Format 1 - Use color name --> <table bgcolor = "yellow" width = "100%"> <tr> <td> This background is yellow </td> </tr> </table> <!-- Format 2 - Use hex value --> <table bgcolor = "#6666FF" width = "100%"> <tr> <td> This background is sky blue </td> </tr> </table> <!-- Format 3 - Use color value in RGB terms --> <table bgcolor = "rgb(255,0,255)" width = "100%"> <tr> <td> This background is green </td> </tr> </table> </body> </html>
background属性还可以用于控制HTML元素的背景,特别是页面正文和表格背景。 您可以指定图像来设置HTML页面或表格的背景。
注意:HTML5中不推荐使用background属性。 不要使用此属性。
以下是将background属性与任何HTML标记一起使用的语法。
注意:不建议使用background属性,建议使用Style Sheet进行背景设置。
<tagname background = "Image URL"...>
最常用的图像格式是JPEG,GIF和PNG图像。
以下是设置表格背景图像的示例。
<!DOCTYPE html> <html> <head> <title>HTML Background Images</title> </head> <body> <!-- Set table background --> <table background = "/images/html.gif" width = "100%" height = "100"> <tr><td> This background is filled up with HTML image. </td></tr> </table> </body> </html>
您可能在各种网站上看到了许多图案或透明背景。 这可以简单地通过在背景中使用图案化图像或透明图像来实现。
建议在创建图案或透明GIF或PNG图像时,请使用尽可能小的尺寸,甚至最小为1x1,以避免缓慢加载。
以下是设置表格背景图案的示例:
<!DOCTYPE html> <html> <head> <title>HTML Background Images</title> </head> <body> <!-- Set a table background using pattern --> <table background = "/images/pattern1.gif" width = "100%" height = "100"> <tr> <td> This background is filled up with a pattern image. </td> </tr> </table> <!-- Another example on table background using pattern --> <table background = "/images/pattern2.gif" width = "100%" height = "100"> <tr> <td> This background is filled up with a pattern image. </td> </tr> </table> </body> </html>