网页中怎么插入背景图片？

html5html

在HTML中插入背景图片，通常是通过CSS的background-image属性来实现的。你可以在HTML文件的<style>标签内直接写CSS样式，或者将CSS样式写在单独的.css文件中，并在HTML文件中通过<link>标签引入。

以下是一个示例，展示了如何在HTML文件中使用CSS为整个页面设置背景图片：

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>背景图片示例</title>  
<style>  
  /* 设置body的背景图片 */  
  body {  
    background-image: url('image/1.jpg'); /* 替换为你的图片路径 */  
    background-repeat: no-repeat; /* 不重复图片 */  
    margin: 0; /* 去除默认的margin */  
    padding: 0; /* 去除默认的padding */  
  }  
</style>  
</head>  
<body>  
  <!-- 页面内容 -->  
  <p style="color:white;margin: 100px;">这是一个带有背景图片的网页示例。</p>  
</body>  
</html>

在上面的示例中，background-image属性用于指定背景图片的路径。你需要将'background.jpg'替换为你自己的图片文件路径。

background-repeat属性用于控制图片是否重复。这里设置为no-repeat表示图片不重复。

background-size属性用于控制图片的大小。cover值表示图片会被缩放以完全覆盖容器，但可能会被裁剪。

background-position属性用于控制图片在容器中的位置。这里设置为center表示图片居中显示。

另外，我还添加了margin: 0;和padding: 0;来去除body元素的默认外边距和内边距，以确保背景图片能够覆盖整个页面。

请注意，如果你的图片文件和HTML文件不在同一个目录下，你需要提供正确的相对路径或绝对路径来引用图片。

上一篇：Canvas基础知识-绘制圆形

下一篇：Canvas基础知识-绘制梯形