HTML + CSS 连载 | 25 - CSS 设置背景

一、设置背景-background-position

background-position 用于设置背景图片在水平、垂直方向上的具体位置，可以设置具体的值，如 20px 30px，水平和垂直方向上还可以设置 left\top、center、right\bottom 等值，如果只设置了一个方向，另一个方向默认是 center。

设置图片的 background-position 为具体的方位，代码如下：

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 600px;
      height: 600px;
      background-color: #f00;

      /*设置背景图片*/
      background-image: url(../images/selenium_python.png);
      background-repeat: no-repeat;

      /*设置图片位置*/
      background-position: right bottom;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

也可以设置 center 方位：

CSS 复制代码

.box {
  width: 600px;
  height: 600px;
  background-color: #f00;

  /*设置背景图片*/
  background-image: url(../images/selenium_python.png);
  background-repeat: no-repeat;

  /*设置图片位置*/
  background-position: center center;
}

在浏览器中打开 HTML 页面，效果如下：

二、设置背景-background-attchment

background-attachment 属性决定背景图片的位置是在视口内固定或者随着包含它的区块滚动；该属性可以设置以下三个值：

scroll：表示背景相对于元素本身固定，而不是随着它的内容移动
local：表示背景相对于元素的内容固定，如果一个元素拥有滚动机制，背景将会随着元素的内容滚动
fixed：背景相对于视口固定，即使一个元素用于滚动机制，背景也不会随着元素的内容滚动

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 150px;
      height: 200px;
      overflow: scroll;
      background-color: #f00;
      background-image: url(../images/selenium.webp);
    }
  </style>
</head>
<body>
  <div class="box">
    MySQL 是一个开放源码的小型关联式数据库管理系统，开发者为瑞典 MySQL AB 公司。目前 MySQL 被广泛地应用在 Internet 上的中小型网站中。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站总体拥有成本而选择了 MySQL 作为网站数据库。
  </div>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

当滚动文字的时候，图片并没有随着文字一起滚动，通过设置 background-attchment 为 local 就可以让背景图片随着文字一起滚动；

CSS 复制代码

.box {
  width: 150px;
  height: 200px;
  overflow: scroll;
  background-color: #f00;
  background-image: url(../images/selenium.webp);

  background-attachment: local;
}

刷新页面，滚动文字可以看到图片随着一起滚动：

给 HTML 页面增加内容，使视口出现滚动条，并设置 background-attchment 的值为 fixed，具体 HTML 代码如下：

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 150px;
      height: 500px;
      overflow: scroll;
      background-color: #f00;
      background-image: url(../images/selenium.webp);

      background-attachment: fixed;
    }
  </style>
</head>
<body>
  <div class="box">
    MySQL 是一个开放源码的小型关联式数据库管理系统，开发者为瑞典 MySQL AB 公司。目前 MySQL 被广泛地应用在 Internet 上的中小型网站中。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站总体拥有成本而选择了 MySQL 作为网站数据库。
    MySQL 是一个开放源码的小型关联式数据库管理系统，开发者为瑞典 MySQL AB 公司。目前 MySQL 被广泛地应用在 Internet 上的中小型网站中。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站总体拥有成本而选择了 MySQL 作为网站数据库。
  </div>
  <br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br>
</body>
</html>

刷新页面，并滚动视图的滚动条，可以看到背景图片是不动的；

background 属性

background 属性是一系列背景相关属性的简写，常用格式如下：

需要注意的是：

background-size 可以省略，如果不省略，background-size 必须紧跟在 background-position 的后面。
其他属性也都可以省略，而且顺序任意。

三、backgournd-image 与 img 的对比

利用 background-image 和 img 元素都能够实现显示图片的需求，那么它们之间有什么区别？

	img	background-image
性质	HTML 元素	CSS 样式
图片是否占用空间	是	否
浏览器右键是否可以直接查看地址	是	否
支持 CSS Sprite	否	是
更有可能搜索引擎收录	是(结合 alt 属性)	否

img 元素作为 HTML 内容的重要组成部分，比如广告图片、LOGO 图片、文章配图以及产品图片等；而 background-imge 则可有可无，有可以让网页更加美观，没有也不影响用户获取完整的网页信息内容。