在 HTML5 中，可以通过多种方式设置页面的背景图像

Bol5261

已于 2024-12-16 14:20:51 修改

阅读量8.4k

点赞数 4

分类专栏： HTML5(HyperText Markup) CSS(Cascading Style Sheets) Job(a good job programmer) 文章标签： html css html5 css3 java

于 2020-06-26 12:21:50 首次发布

本文链接：https://blog.csdn.net/blog_programb/article/details/106968377

版权

本文介绍如何使用HTML5和CSS3的background-image属性来为网页设置背景图像。背景图像默认从左上角开始，水平和垂直重复填充，确保在设置时配合背景颜色以保证在图像不可用时页面仍具良好视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5 是一种用于构建网页的标准标记语言。在 HTML5 中，可以通过多种方式设置页面的背景图像。以下是一些常见的方法：

1. 使用内联样式（Inline Style）

你可以直接在 HTML 元素的 style 属性中使用 CSS 来设置背景图像。例如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>设置页面背景图像</title>
</head>
<body style="background-image: url('background.jpg'); background-size: cover;">
    <h1>欢迎来到我的网站</h1>
    <p>这是一个示例页面。</p>
</body>
</html>

在这个例子中，background-image 属性设置了背景图像的 URL，而 background-size: cover; 确保背景图像覆盖整个页面。

2. 使用内部样式表（Internal Stylesheet）

你可以在 <style> 标签中定义 CSS 规则，然后在 HTML 元素中应用这些规则。例如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">

最低0.47元/天解锁文章