1. 设置整个页面的背景：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML背景示例</title>
<style>
body {
background-color: #f0f0f0; /* 设置整个页面的背景颜色 */
}
</style>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
2. 设置元素的背景：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML背景示例</title>
<style>
.container {
background-color: #f0f0f0; /* 设置元素的背景颜色 */
padding: 20px; /* 添加内边距以增加可读性 */
}
</style>
</head>
<body>
<div class="container">
<!-- 元素内容 -->
</div>
</body>
</html>
3. 使用背景图像：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML背景示例</title>
<style>
body {
background-image: url('background.jpg'); /* 设置整个页面的背景图像 */
background-size: cover; /* 覆盖整个页面 */
background-repeat: no-repeat; /* 不重复显示背景图像 */
}
.container {
background-image: url('element-background.jpg'); /* 设置元素的背景图像 */
background-size: contain; /* 包含整个元素 */
background-repeat: repeat; /* 在元素内重复显示背景图像 */
padding: 20px; /* 添加内边距以增加可读性 */
}
</style>
</head>
<body>
<div class="container">
<!-- 元素内容 -->
</div>
</body>
</html>
以上是一些基本的HTML背景设置方法。你可以根据需要调整颜色、图像和其他属性来满足设计要求。CSS提供了丰富的背景样式属性，包括颜色、图像、重复方式、大小等。
转载请注明出处：http://www.zyzy.cn/article/detail/3140/HTML