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

CSS教程（七）- 背景

article 2024/11/14 21:45:41

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

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-color
	background-image
	background-repeat
	background-attachment
	background-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>