HTML 背景图像 - 芒果文档

📌 相关文章

📜 HTML 背景图像

📅 最后修改于: 2020-11-01 12:01:15 🧑 作者: Mango

HTML背景图片

HTML文档中的属性用于指定HTML页面或表格上的背景图像。您可以将图像的路径作为background属性的值传递，以设置HTML页面或表格的图像。

句法

注意：HTML5不支持Background属性。使用以下CSS语法：

示例：以下示例以不同的样式设置背景图像：

示例1：本示例使用带有body标签的background属性，将图像显示为网页的背景。




 
Example of Background image





 click on this  link  for the Home page of Our Website

输出：

示例2：本示例使用background属性和table标记将图像显示为html表的背景。

  
   
  
  
    Example of Background image 
  
  



In this example, we use the background attribute with the table tag, which displays the image as a background of the HTML table. 


 
    
         Roll No. 
         Name 
    
    
         101 
         Abhay 
    
    
         102 
         Chetan 
    
    
         103 
         Manpreet 
    
    
         104 
         Rakesh 
    
    
         105 
         Sumit

输出：

示例3：此示例对带有body标签的style属性的background-image属性使用CSS语法。

  
   
  
  
    Example of Background image 
  
  

 



In this example, we use the  background-image  property in the style attribute with the  body tag  which display the image as a background on the web page. 





    
         Roll No. 
         Name 
    
    
         101 
         Abhay 
    
    
         102 
         Chetan 
    
    
         103 
         Manpreet 
    
    
         104 
         Rakesh 
    
    
         105 
         Sumit

输出：

示例4：此示例对带有table标记的style属性中的background-image属性使用CSS语法。

  
   
  
  
    Example of Background image 
  
  


In this example, we use the  background-image property  in the  style attribute  with the  table tag  which display the image as a background of HTML table. 




 
    
         Roll No. 
         Name 
    
    
    
         101 
         Abhay 
    
    
         102 
         Chetan 
    
    
         103 
         Manpreet 
    
    
         104 
         Rakesh 
    
    
         105 
         Sumit

输出：

示例5：此示例对带有body标签的style属性的background-repeat和background-size属性使用CSS语法。

  
   
  
  
    Example of Background image 
  
  

 



In this example, we use the  background-repeat and background-size property  in the  style attribute  with the  body  tag 
which display the image without repeatition. 






    
         Roll No. 
         Name 
    
    
         101 
         Abhay 
    
    
         102 
         Chetan 
    
    
         103 
         Manpreet 
    
    
         104 
         Rakesh 
    
    
         105 
         Sumit

输出：

浏览器支持

Element	Chrome	IE	Firefox	Opera	Safari
Background Image	Yes	Yes	Yes	Yes	Yes