📅 最后修改于: 2023-12-03 15:31:16.376000 🧑 作者: Mango
在开发网页时，我们经常需要为页面添加一个漂亮的背景图案或图片，以增强页面的美观度和吸引力。本文将介绍如何使用 CSS 技术为网页添加整页背景图片，让你的网页看起来更加精美和专业。
使用 CSS 添加整页背景图片最简单的方法是使用嵌入式样式表。该方式需要将 CSS 样式代码添加在网页的 head 标签中。代码格式如下：
<style type="text/css">
body {
background-image: url("bg.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
</style>
代码解析：
background-image属性：设置页面的背景图片的 URL。background-size属性：设置背景图片的尺寸，可以选择 cover 或 contain。background-position属性：设置背景图片的位置，可以选择 left top，left center，left bottom，center top，center center，center bottom，right top，right center 或 right bottom。background-repeat属性：设置背景图片是否平铺，可选择 repeat，repeat-x，repeat-y 或 no-repeat。上面的代码将 HTML 网页的背景图片设置为 bg.jpg，该图片将完全覆盖整个页面。为了让背景图像适应不同的屏幕大小，我们使用了 background-size: cover 属性。
如果你需要在多个页面中使用相同的整页背景图片，最好使用外部样式表来避免重复的代码。外部样式表是 CSS 样式代码的独立文档，可以被多个网页引用。为了使用外部样式表，你需要在 head 标签中添加以下代码：
<link rel="stylesheet" type="text/css" href="styles.css">
该代码会将样式表文件 styles.css 引入到 HTML 网页中。接下来，在 styles.css 文件中添加以下代码：
body {
background-image: url("bg.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
代码解析同使用嵌入式样式表。
如果你只需要为某个页面添加一次整页背景图片，可以使用内联样式表。内联样式表是 CSS 样式代码嵌入到 HTML 元素标签内的一种方式。例如，以下代码将为页面添加一个整页背景图片：
<body style="background-image: url('bg.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat;">
<!-- 页面内容 -->
</body>
代码解析同使用嵌入式样式表。
总结：
background-image，background-size，background-position 和 background-repeat 属性可以控制背景图片的尺寸、位置和重复方式。