HTML如何设置背景图片？有几种设置背景图片的办法？

作者：System 时间：2024年08月20日分类：所有,html 字数：811

这篇文章距离上次修改已过252天，其中的内容可能已经有所变动。

在HTML中设置背景图片通常有以下几种方法：

使用<style>标签和CSS：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('background.jpg');
  background-size: cover; /* 背景图片覆盖整个容器 */
}
</style>
</head>
<body>
</body>
</html>

直接在<body>标签中使用background属性：

<!DOCTYPE html>
<html>
<body background="background.jpg">
</body>
</html>

使用内联样式：

<!DOCTYPE html>
<html>
<body style="background-image: url('background.jpg');">
</body>
</html>

使用外部CSS文件：

/* styles.css */
body {
  background-image: url('background.jpg');
  background-size: cover;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
</body>
</html>

以上方法均可设置HTML页面的背景图片，通常推荐使用CSS方式，因为它可以提供更多的控制和灵活性。

HTML如何设置背景图片？有几种设置背景图片的办法？

评论已关闭

推荐阅读