当前位置：首页 > news >正文

CSS教程（七）- 背景

news 2025/7/12 13:02:49

介绍
- 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1 背景颜色

属性名：background-color
作用：指定HTML元素的背景色。
取值：英文颜色、16进制、rgb、rgba、transparent（一般为透明）

示例

div {background-color: lightblue;
}div {background-color: #0ff;
}div {background: rgba(0, 128, 0, 0.3)   /* 30% 不透明度的绿色背景 */
}

2 背景图片

属性名：background-image
作用：指定用作元素背景的图像.

示例

/* 设置页面背景图 */
body {background-image: url("paper.gif");
}

3 背景图位置

属性：background-position
作用：改变图片在背景中的位置
语法：background-position: x y;
取值：百分比（浮点数和单位标识符组成的长度值）、位置（top/center/bottom/left/right等）
说明
1. 参数是：方位名词
  - 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
  - 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2. 参数是：精确单位
  - 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
  - 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
3. 参数是：混合单位
  - 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

示例

img{background-position: top left; /* 背景图像位于容器的左上角 */ background-position: center center; /* 背景图像位于容器的中心 */background-position: 20px 40px; /* 背景图像距离容器左边20px，顶部40px */background-position: -10px -5px; /* 背景图像向左偏移10px，向上偏移5px（如果容器足够大，图像可能部分不可见） */  background-position: 50% 50%; /* 背景图像的中心与容器的中心对齐 */ 
}

4 背景重复

属性名：background-repeat
作用：默认情况下 background-image 属性在水平和垂直方向上都重复图像.
取值：
- repeat：默认在横向或纵向上平铺。
- repeat-x：仅在水平方向重复。
- repeat-y：仅在垂直方向重复。
- no-repeat：指定背景图像不平铺。

示例

body {background-image: url("gradient_bg.png");background-repeat: repeat-x;  /* 仅在水平方向重复  */
}

5 背景附着

属性名：background-attachment
作用：指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）
取值：
- fixed：背景图像固定。
- scroll：背景图像应随页面的其余部分一起滚动。

示例

body {background-image: url("tree.png");background-repeat: no-repeat;background-position: right top;background-attachment: fixed;background-size: 80px 60px;
}

6 背景简写

属性：background
写法：background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

语法

background(background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
)

示例

body {/* 设置背景颜色 *//* background-color: rgba(0, 255, 0, 0.2); *//* 设置背景图片 *//* background-image: url(bbg.jpeg); */background-image: url(th.gif);/* 设置背景图尺寸 */background-size: 100%;/* 设置背景图不平铺 */background-repeat: no-repeat;/* 设置背景图显示位置 */background-position: right top;/* background-position: 100px; *//* 设置背景图附着方式 */background-attachment: scroll;/* 简写方式 */background: url(bbg.jpeg) no-repeat scroll 0 0;}

7 示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>背景设置</title><style>body {/* 背景颜色 *//* background-color: greenyellow; *//* 调整背景颜色透明度(alpha)：取值 0-1 *//* background-color: rgba(0, 200, 200, 0.2); *//* 渐变色 *//* background: linear-gradient(to bottom, #629ccc, #035bcc, #72abcb); *//* 背景图片 *//* 静态图 *//* background-image: url(image/sbg.jpg); *//* background-image: url(image/bbg.jpeg);background-size: 100%; *//* 动态图：gif格式 *//* background-image: url(image/th.gif);background-size: 100%; *//* 图片平铺 *//* x、y方向都会平铺【默认】,推荐使用：no-repeat *//* background-repeat: repeat; *//* background-repeat: no-repeat; *//* background-repeat: repeat-x; *//* 图片位置 *//* background-position: 100px 300px; *//* background-position: 200px; *//* background-position: left top; *//* background-position: right; *//* background-position: 100px left; *//* 图片附着：背景图是否随着内容进行滚动 *//* background-attachment: fixed; *//* background-attachment: scroll; *//* 综合写法 */background: url(image/th.gif) no-repeat scroll;}div {/* 快捷写法：w400+h1200+gbc */width: 400px;height: 1200px;background-color: #f16e6e;}</style></head><body><div></div></body>
</html>