如何设置HTML背景图片


共同创作者是 wikiHow员工

参考

这篇文章由我们训练有素的编辑和研究团队共同创作,他们对文章的准确性和全面性进行了验证。wikiHow的内容管理团队会严密监督编辑人员的工作,确保每篇文章都符合我们的高质量标准要求。 这篇文章已经被读过64,206次。

在本文中: 新建文档 编写HTML文件 查看HTML文件 理解HTML代码 理解CSS代码 显示其它2点... 显示较少内容... 相关文章 参考

如果你想向网页中添加图片,用HTML就可以了。但是如果你想将一张图片设置为网页背景图片,就同时需要HTML和CSS。HTML的全名叫做“超文本标记语言”,是一种用来指示浏览器在网页中显示什么内容的代码。[1] 研究来源 CSS的全名叫做“层叠样式表”,用来改变网页外观和布局。[2] 研究来源 你还需要一张用于web页面的背景图片。

步骤

新建文档


  1. 1 创建一个文件夹用来存放HTML文件和背景图片。在电脑上创建并命名一个文件夹,方便日后查找。
    • 你可以为文件夹随意命名,但是使用HTML时,最好养成习惯,使用简短的单个单词来命名文件和文件夹。

  2. 2 将背景图片放入HTML文件夹。将你想要用作背景的图片放入HTML文件夹。
    • 如果你不在意网页是否能在网速较慢的旧设备上运行顺畅,可以使用高分辨率图片来作为背景。选择带有重复图样的简单图片作为背景也不错,因为你可以在这种背景下阅读任何文本。
    • 如果你没有图片,可以下载免费的背景图。下载好图片,将它放入创建好的HTML文件夹中。

  3. 3 创建一个HTML文件。打开文本编辑器,然后新建一个文件。将文件另存为index.html。
    • 你可以使用任何你想要的文本编辑器,系统自带的文本编辑器也可以,如Windows的记事本,以及Mac OS 的文本编辑器。
    • 如果你想要使用能处理HTML的文本编辑器,点击这里下载Windows、Mac OS 、Linux操作系统都可以使用的文本编辑器Atom。
    • 如果你使用的是Mac电脑的文本编辑器,在开始编写HTML文件之前,单击“格式”菜单,然后单击“生成纯文本”。该设置会确保HTML文件在网页浏览器中正常加载。
    • 诸如Microsoft Word之类的文字处理程序并不适合编写HTML,因为它们添加了一些不可见的字符和格式,这些字符和格式可能会破坏HTML文件,让它无法在网页浏览器中正确显示。

编写HTML文件


  1. </style> </head> <body> </body> </html>

  2. 2 添加背景图像地址。在index.html文件中找到“background-image: url(" ");”这一行,将光标移到括号之间,然后输入背景图片文件名。确保包含背景图片文件扩展名。
    当你完成的时候,应该是这样的: background-image: url("background.png");
    当你使用的文件名没有文件路径或地址时,网页浏览器将在网页文件夹中查找指定的图片。如果文件位于文件系统上的另一个文件夹中,则需要为文件添加完整路径。 [3] 研究来源
  • 保存HTML文件。
  • 查看HTML文件


    1. 1 在网页浏览器中打开HTML文件。右键单击index.html文件,然后在你选择的网页浏览器中打开它。
      • 当浏览器打开时,如果没有看到图片,确认图片文件名在index.html文件的文本编辑器窗口中拼写正确。
      • 当浏览器打开时,如果你看到的是HTML代码,而不是背景图片,那是因为你的index.html文件被保存为富文本文档。最好还是换一个文本编辑器来编辑HTML文件。

    2. 2 编辑HTML文件。在文本编辑器窗口中,将光标移至<body> </body>标签之间,然后输入“Hello world!”。重新加载浏览器窗口,查看背景图片上方的文本。

    理解HTML代码


    1. 1 理解HTML和CSS标签。HTML代码由开始标签和结束标签组成。<body>是主体的开始标签,</body>是主体的结束标签。HTML页面上的每个开始标签都需要有一个结束标签,以便正确显示页面。

    2. 2 理解DOCTYPE标签。每一个编写规范的HTML页面开头都应该有<!DOCTYPE html>。该标签是用来告诉浏览器该文件是HTML文件。

    3. 3 编辑HTML文件。在文本编辑窗口中,将光标移至<body> </body>标签之间,然后输入“Hello world!”。重新加载浏览器窗口,查看背景图片上方的文本。

    4. 4 理解HTML和CSS标签。HTML代码由开始标签和结束标签组成。<body>是主体的开始标签,</body>是主体的结束标签。HTML页面上的每个开始标签都需要有一个结束标签,以便正确显示页面。

    5. 5 理解标题标签。<title> 标签是出现在浏览器窗口标题栏中的文本,以及在浏览器标签中显示的文本。

    6. 6 理解样式标签。<style>标签标示出CSS内容。<style>标签内的所有内容都是CSS代码。

    7. 7 理解主体标签。在<body>标签内输入的任何内容都会显示出来,除了HTML代码或CSS 代码。

    8. 8 编辑HTML文件。在文本编辑窗口中,将光标移至<body> </body>标签之间,然后输入“Hello world!”。重新加载浏览器窗口,查看背景图片上方的文本。

    理解CSS代码


    1. 1 理解CSS代码。在index.html文件代码中,<style>标签内的CSS代码指示浏览器在网页显示时,向<body>标签添加特定名称的背景图片。


    2. 4 理解CSS代码的各个部分。CSS样式由选择器和声明两部分组成。 [4] 研究来源
        在示例中,body是选择器,而 background-image: url("background.png") 是声明部分。
        选择器可以是任何HTML标签。
        声明总是在大括号{ }之间。

    3. 5 理解CSS声明。CSS声明由属性和值两部分组成。在大括号之间, background-image 是属性,而url("background.png")是值。 [5] 研究来源
        属性描述样式类型,值描述属性是如何样式化的。
        属性和值始终用冒号“:”分隔。
        CSS声明始终以分号“;”结尾。

    本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

    • 分享:
    评论
    还没有评论
      发表评论 说点什么