HTML5基础——9、CSS背景样式

原创已于 2025-10-18 07:53:24 修改 · 906 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #前端 #背景样式

于 2025-10-17 10:00:00 首次发布

H5 专栏收录该内容

46 篇文章

订阅专栏

大家好，我是阿赵。继续学习H5，这次学习一下背景样式。
先看看这个例子：

  <style>
    div {
      border: 1px solid black;
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>
  <div></div>
</body>

运行会发现，这个div现在是一个200x200像素的正方形，还有1像素的黑色边框：
在这里插入图片描述

接下来给这个div设置一下背景

1、背景颜色

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      background-color: red;
      border: 1px solid black;
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>
  <div></div>
</body>

运行效果：
在这里插入图片描述

可以看到，修改背景颜色可以通过background-color来指定

background-color: red;

颜色除了直接指定默认颜色，还可以通过rgba来指定，比如：

background-color: rgba(255, 0, 0, 0.5);

或者

background-color: #ff000088;

这时候的效果会变成：
在这里插入图片描述

2、背景图片

除了指定颜色，还可以给背景指定图片。
比如我在img文件夹下面放了一张阿赵的头像：
在这里插入图片描述

这时候把代码改成:

div {
  background-image: url("img/azhao.png");
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

效果会变成：
在这里插入图片描述

为什么没有显示整个头像？这是因为，阿赵这个图片的分辨率是512x512的，而div本身只有200x200。
如果把div的大小改成512

div {
  background-image: url("img/azhao.png");
  border: 1px solid black;
  width: 512px;
  height: 512px;
}

这时候就能看到完整的图片
在这里插入图片描述

3、背景重复平铺

&emsp;&emsp;反过来，如果指定的div的大小比图片大，比如指定长宽为1000
    div {
      background-image: url("img/azhao.png");
      border: 1px solid black;
      width: 1000px;
      height: 1000px;
    }

那么就会：
在这里插入图片描述

这时候出现了平铺的问题，可以通过background-repeat来指定平铺的模式
默认的就是

background-repeat: repeat;

这种模式就是正常的重复平铺
然后还有不重复：

background-repeat: no-repeat;

这样只会显示1张图片
在这里插入图片描述

还有横向重复平铺

 background-repeat: repeat-x;

这时候只有x方向重复平铺：
在这里插入图片描述

还有纵向重复平铺

background-repeat: repeat-y;

这时候只有y方向重复平铺
在这里插入图片描述

4、背景大小适配

假如我就是想要div的大小只有200，但又要显示完整的图片，可以指定background-size，比如：

div {
  background-image: url("img/azhao.png");
  background-size: cover;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

这时候的效果是：
在这里插入图片描述

图片缩小到符合div大小了。
其实background-size的作用是修改图片的大小，所以还可以直接指定像素，比如改成这样：

div {
  background-image: url("img/azhao.png");
  background-size: 30px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

显示效果：
在这里插入图片描述

由于现在每张图片只有30x30像素，而div有200像素，所以就直接重复平铺了多个了。
或者也可以用百分比来指定

div {
  background-image: url("img/azhao.png");
  background-size: 50%;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

这样图片就一直是元素的一半大小：
在这里插入图片描述

5、背景位置

之前图片大于显示元素时，会发现只显示了图片的一个部分。我们可以通过background-position来指定需要显示的部分。这个属性的用法有几种

1. 通过方位词来指定

比如：

div {
  background-image: url("img/azhao.png");
  background-position: top right;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

这时候的效果是：
在这里插入图片描述

留意看看原图，可以方向现在显示的是图片的右上角。
方位词有：

top、bottom、left、right、center

代表的是上、下、左、右、中间
可以组合使用，比如top left代表左上角，bottom right代表右下角。

2. 通过精确值指定

如果设置的不是方位词，而是具体的像素值

div {
  background-image: url("img/azhao.png");
  background-position: -100px -100px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

这时候会是这样：
在这里插入图片描述

留意看，我设置的值都是负数。默认坐标在左上角，然后x如果为正数，会向左移，负数是往右移动。y轴正数是往上移动，负数是向下移动。
如果输入的是精确数值，只输入一个x轴，那么y轴会自动居中，比如：

div {
  background-image: url("img/azhao.png");
  background-position: -100px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

可以看到x轴往右移动了100像素，而y轴是居中了：
在这里插入图片描述

背景位置这个功能可以着重留意，等学到动画的时候，可以通过移动背景图片的位置，做出逐帧动画的效果。

6、背景附着

最后再介绍一个比较有趣的属性，叫做背景附着
假如我们的例子改成这样：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      background-image: url("img/azhao.png");
      border: 1px solid black;
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>

现在有很多个div，会造成了一页显示不完，会出现页面的滚动条：
在这里插入图片描述

默认的情况下，滚动条动的时候，这些div会跟随着一起上下移动。
下面我们加一个属性

div {
  background-image: url("img/azhao.png");
  background-attachment: fixed;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

时候的效果变成了：
在这里插入图片描述

主要的效果有2个：

多个div之间的图片会衔接在一起
在滚动条动的时候，这些div的外框虽然会跟随着一起上下移动，但里面的图片却会停留在原来的位置不会动。
其实这个功能实现的原理是，把图片变成了整个页面平铺了。这个功能可以做出很多好玩的功能。

在这里插入图片描述

HTML5基础——9、CSS背景样式

1、 背景颜色

2、 背景图片

3、 背景重复平铺

4、 背景大小适配

5、 背景位置