📌  相关文章
📜  如何在HTML中添加背景图片

📅  最后修改于: 2020-11-04 00:47:01             🧑  作者: Mango

如何在HTML中添加背景图片

在HTML中，我们可以使用以下两种不同的方法轻松地将背景图像添加到要显示在网页上的HTML文档中：

  • 使用背景属性(HTML标记)
  • 使用内部样式表

使用背景属性

注意：HTML 5不支持的background属性标签，因此我们必须使用内部CSS选项在Html文档中添加背景。

如果要使用Background属性在Html文档中添加背景图像，则必须遵循以下步骤。使用这些步骤，我们可以轻松地在网页上查看图像：

步骤1：首先，我们必须在任何文本编辑器中键入Html代码，或者在要使用background属性的文本编辑器中打开现有的Html文件。


   
    
   
Add the Background image using background attribute 


 
JavaTpoint   

Html Tutorial   

This page helps us to understand how to show the backround image of a web page. 



And, this section helps you to understand how to add the background image in an Html page using the background attribute.

步骤2：现在，将光标移到开始位置标记在我们的HTML文档中。然后，键入背景属性，如以下块所示：

步骤3：之后，我们必须提供要添加的图像的路径。因此，请在background属性中键入图像的路径。如果我们的图像存储在与HTML文件存储在同一目录中，请键入以下路径：

如果我们的图像存储在任何其他目录中，请键入该图像的正确路径，以便浏览器可以轻松地读取图像，如以下块中所述。

如果我们的图像在互联网上，那么我们也可以使用URL添加图像，如以下块中所示。

步骤4：最后，我们必须在文本编辑器中保存HTML文件或HTML代码。


   
    
   
Add the Background image using background attribute 


 
JavaTpoint   

Html Tutorial   

This page helps us to understand how to show the backround image of a web page. 



And, this section helps you to understand how to add the background image in an Html page using the background attribute.

以下屏幕快照显示了以上代码的输出：

使用内部样式表

如果要使用内部CSS在Html文档中添加背景图片，则必须遵循以下步骤。使用这些步骤，我们可以轻松地在网页上查看图像：

步骤1：首先，我们必须在任何文本编辑器中键入Html代码，或在文本编辑器中打开要使用Internal CSS选项添加背景图像的现有HTML文件。


   
    
   
Add the Background image using Internal Style sheet


 
JavaTpoint   

Html Tutorial   

This page helps us to understand how to show the backround image of a web page. 



And, this section helps you to understand how to add the background image in an Html page using the Internal CSS.

第2步：现在，我们必须将光标放在Html文档中标题标签关闭之后的head标签中，然后定义标签的开始和结束标签

步骤3：现在，我们必须在样式标签中键入元素主体。然后，如以下块所示，键入background-image属性：


   
    
   
Add the Background image using Internal Style sheet



 
JavaTpoint   

Html Tutorial   

This page helps us to understand how to show the backround image of a web page. 



And, this section helps you to understand how to add the background image in an Html page using the Internal CSS.

步骤4：最后，我们必须将HTML代码保存在文本编辑器中并运行该代码。执行后，我们将看到html文档中指定的图像作为网页的背景。以下屏幕截图提供了上述HTML代码的输出：