背景样式（给网页"换底色"，丰富视觉效果）

7.1 背景颜色（background-color）

定义

设置元素的背景颜色。

语法

css

元素 {
  background-color: 颜色值;
}

颜色值的写法

十六进制：#RRGGBB，如 #ff0000（红色）
RGB：rgb(红, 绿, 蓝)，如 rgb(255, 0, 0)（红色）
RGBA：rgba(红, 绿, 蓝, 透明度)，如 rgba(255, 0, 0, 0.5)（半透明红色）
英文名称：如 red、blue、green
transparent：透明（默认值）

示例

css

/* 纯色背景 */
.header {
  background-color: #333;
}

/* 半透明背景 */
.overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

/* 透明背景 */
.transparent-box {
  background-color: transparent;
}

7.2 背景图片（background-image）

定义

设置元素的背景图片。

语法

css

元素 {
  background-image: url('图片路径');
}

示例

css

/* 设置背景图片 */
.hero-section {
  background-image: url('images/hero-bg.jpg');
}

/* 设置渐变背景 */
.gradient-bg {
  background-image: linear-gradient(to right, #ff6b6b, #4ecdc4);
}

7.3 背景平铺（background-repeat）

定义

设置背景图片的平铺方式。

语法

css

元素 {
  background-repeat: 平铺方式;
}

常用值

repeat：水平和垂直方向都平铺（默认值）
no-repeat：不平铺
repeat-x：只在水平方向平铺
repeat-y：只在垂直方向平铺

示例

css

/* 不平铺 */
.no-repeat-bg {
  background-image: url('images/logo.png');
  background-repeat: no-repeat;
}

/* 水平平铺 */
.horizontal-repeat {
  background-image: url('images/pattern.png');
  background-repeat: repeat-x;
}

7.4 背景位置（background-position）

定义

设置背景图片的位置。

语法

css

元素 {
  background-position: 水平位置 垂直位置;
}

常用值

关键字：left、center、right、top、bottom
百分比：0%、50%、100%
像素值：10px、20px

示例

css

/* 居中显示 */
.center-bg {
  background-image: url('images/center.png');
  background-repeat: no-repeat;
  background-position: center center;
}

/* 右上角显示 */
.top-right-bg {
  background-image: url('images/badge.png');
  background-repeat: no-repeat;
  background-position: right top;
}

7.5 背景尺寸（background-size）

定义

设置背景图片的尺寸。

语法

css

元素 {
  background-size: 宽度 高度;
}

常用值

cover：等比例缩放，完全覆盖容器（可能裁剪图片）
contain：等比例缩放，图片完整显示（可能有空白）
百分比：50% 50%
像素值：100px 200px

示例

css

/* 全屏背景图 */
.fullscreen-bg {
  background-image: url('images/bg.jpg');
  background-size: cover;
  background-position: center;
}

/* 固定尺寸 */
.fixed-size-bg {
  background-image: url('images/icon.png');
  background-size: 50px 50px;
}

7.6 背景简写（background）

定义

将多个背景属性合并为一个简写属性。

语法

css

元素 {
  background: 颜色 图片 平铺 位置/尺寸;
}

示例

css

/* 简写形式 */
.hero {
  background: #333 url('images/hero.jpg') no-repeat center/cover;
}

/* 等价于 */
.hero {
  background-color: #333;
  background-image: url('images/hero.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

7.7 实战：给页面设置全屏背景图、卡片背景色

实战目标

创建一个页面，包含全屏背景图和带背景色的卡片。

实战步骤

创建HTML文件：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS背景样式实战</title>
  <style>
    /* 在这里添加CSS样式 */
  </style>
</head>
<body>
  <div class="hero-section">
    <div class="hero-content">
      <h1>欢迎来到CSS世界</h1>
      <p>学习CSS，让网页更加美观</p>
    </div>
  </div>
  
  <div class="cards-container">
    <div class="card card-1">
      <h3>卡片1</h3>
      <p>这是第一个卡片，带有蓝色背景。</p>
    </div>
    <div class="card card-2">
      <h3>卡片2</h3>
      <p>这是第二个卡片，带有渐变背景。</p>
    </div>
    <div class="card card-3">
      <h3>卡片3</h3>
      <p>这是第三个卡片，带有图片背景。</p>
    </div>
  </div>
</body>
</html>

添加CSS样式：

css

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
}

/* 全屏背景图区域 */
.hero-section {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
              url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920') no-repeat center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-content {
  text-align: center;
  color: white;
}

.hero-content h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.hero-content p {
  font-size: 24px;
}

/* 卡片容器 */
.cards-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 50px 20px;
  background-color: #f5f5f5;
}

/* 卡片样式 */
.card {
  width: 300px;
  padding: 30px;
  border-radius: 10px;
  color: white;
  text-align: center;
}

.card h3 {
  font-size: 24px;
  margin-bottom: 15px;
}

.card-1 {
  background-color: #3498db;
}

.card-2 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-3 {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
              url('https://images.unsplash.com/photo-1557683316-973673baf926?w=400') no-repeat center/cover;
}

运行页面：在浏览器中打开文件，观察效果

预期效果

全屏背景图：带有半透明遮罩的全屏背景图，文字居中显示
卡片区域：三个不同背景样式的卡片，分别是纯色、渐变和图片背景

背景样式（给网页"换底色"，丰富视觉效果） ​

7.1 背景颜色（background-color） ​

定义 ​

语法 ​

颜色值的写法 ​

示例 ​

7.2 背景图片（background-image） ​

定义 ​

语法 ​

示例 ​

7.3 背景平铺（background-repeat） ​

定义 ​

语法 ​

常用值 ​

示例 ​

7.4 背景位置（background-position） ​

定义 ​

语法 ​

常用值 ​

示例 ​

7.5 背景尺寸（background-size） ​

定义 ​

语法 ​

常用值 ​

示例 ​

7.6 背景简写（background） ​

定义 ​

语法 ​

示例 ​

7.7 实战：给页面设置全屏背景图、卡片背景色 ​

实战目标 ​

实战步骤 ​

预期效果 ​

背景样式（给网页"换底色"，丰富视觉效果）

7.1 背景颜色（background-color）

定义

语法

颜色值的写法

示例

7.2 背景图片（background-image）

定义

语法

示例

7.3 背景平铺（background-repeat）

定义

语法

常用值

示例

7.4 背景位置（background-position）

定义

语法

常用值

示例

7.5 背景尺寸（background-size）

定义

语法

常用值

示例

7.6 背景简写（background）

定义

语法

示例

7.7 实战：给页面设置全屏背景图、卡片背景色

实战目标

实战步骤

预期效果