如何给网站添加背景

下载PDF文件下载PDF文件

背景是一个网站最重要的元素之一。一个好的背景能创建网站的基调并衬托网站中的内容。有许多不同的方法来添加背景,每个都有不同的用途。有些方法可以让您把背景加在网站上的所有网页,而其他的方法只能用来设置特定的页面的背景。这篇文章教您如何使用HTML或CSS添加背景到您的网站。

方法 1
方法 1 的 2:

HTML方式

下载PDF文件

纯色背景

  1. How.com.vn 中文: Watermark How.com.vn to 给网站添加背景
    事实上每一个网站开始都有默认的白色背景。然而,尽管在白色背景配上一个和谐的颜色方案看起来会很光滑干净,其它颜色的背景可能更适合不同的主题。
  2. How.com.vn 中文: Watermark How.com.vn to 给网站添加背景
    广告

在主体标签添加一个bgcolor属性 。现在您的主体标签看起来应该像这样:<body bgcolor="COLORNAME"> 其中COLORNAME是颜色名称。COLORNAME可以填充多种类型的颜色代表。

  1. 1
    • <body bgcolor="red">(颜色名称)
    • <body bgcolor="#FF0000">(十六进制值)
    • <body bgcolor="rgb(255, 8, 9)">(RGB 值)
  2. How.com.vn 中文: Watermark How.com.vn to 给网站添加背景
    但请记住,输入“群青偏蓝绿色”将生成白色。
    广告

添加背景图片

  • 添加背景图像比添加单色背景稍微复杂一点。

把背景属性加入主体标签。它看起来像这样:<body background="SRC">其中SRC是源图像。SRC可以在同一文件夹或其他文件夹或其他网页。

  1. 1
    • <body background="red.gif">(在同一文件夹)
    • <body background="\Folder1\red.gif">(在不同的文件夹内)
    • <body background="imagepage1/red.gif">(在不同的网页)
  2. How.com.vn 中文: Watermark How.com.vn to 给网站添加背景
    广告
方法 2
方法 2 的 2:

CSS方法

下载PDF文件

纯色背景

  1. How.com.vn 中文: Watermark How.com.vn to 给网站添加背景
    您也可以给出ID和类别,同时使用内部和外部的样式表。
  2. How.com.vn 中文: Watermark How.com.vn to 给网站添加背景
    • <body style="background-color: COLORNAME;">
      COLORNAME是颜色名称,十六进制值或RGB (记得HTML中纯色背景最后几步在这里也适用)。
    广告

添加图片

  1. How.com.vn 中文: Watermark How.com.vn to 给网站添加背景
    您也可以给出ID和类别,同时使用内部和外部的样式表。
  2. How.com.vn 中文: Watermark How.com.vn to 给网站添加背景
    • <body style="background-image:url('SRC'); ">
  3. How.com.vn 中文: Watermark How.com.vn to 给网站添加背景
    SRC可以在同一文件夹或其他文件夹或其他网页。
    • <body style="background-image:red.gif;">(在同一文件夹中)
    • <body style="background-image:\Folder1\red.gif">(在不同的文件夹内)
    • <body style="background-image:imagepage1/red.gif">(在不同的网页)
  4. 4
    记住加入扩展名。
    广告

重复图案背景

要做重复的图案背景,按上述步骤添加一个背景。现在您的主体标签一定改变为:<body style="background-image: url('SRC'); background-repeat:REPEAT-SETTINGS; ">,其中REPEAT-SETTINGS是设置。可能有很多重复设置,如:

  1. 1
    • <body style="background-image: red.gif; background-repeat: repeat;">(背景将垂直和水平重复。)
    • <body style="background-image: red.gif; background-repeat: repeat-x;">(背景水平重复。)
    • <body style="background-image: red.gif; background-repeat: repeat-y;">(背景垂直重复。)

固定图像背景

  1. 1
    固定图像背景看起来很酷,页面向下滚动时也不改变。为此您只需要对上面的代码做一些简单的调整。使主体标签成这样:
    • <body style="background-image:url('SRC'); background-attachment:fixed; background-position:POSITION; background-repeat:REPEAT SETTINGS;">
      SRC是背景图像的源件,POSITION是图像的位置(它的范围可以从中心到右上角);背景附件是这类背景的主要“催化剂” 。它是用来说明背景的位置,建议不要改变它。
    广告

提示

  • 阅读整篇文章:你省略的部分可能有一些重要的提示(这篇文章的各部分是相互参照的,最好每部分都读。

警告

  • 两种HTML方法都已老旧,并可能无法用于HTML 4.01以及XHTML。
广告

关于本How.com.vn

How.com.vn是一个“多人协作写作系统”,因此我们的很多文章都是由多位作者共同创作的。 为了创作这篇文章,志愿作者多次对文章进行了编辑和改进。 这篇文章已经被读过15,363次。
本页面已经被访问过15,363次。

这篇文章对你有帮助吗?

⚠️ Disclaimer:

Content from Wiki How 中文 language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.

Notices:
  • - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
  • - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
  • - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
  • - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.

广告