CSS 基础：设置背景的 5 个属性及简写 background 注意点

时间：2024-04-09 14:01:41

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集

263篇原创内容-gzh

后台回复“前端工具”可获取开发工具，持续更新中

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

CSS 中的background背景属性是前端开发中常用的一个属性，它用于控制元素的背景样式，包括背景颜色、背景图片、背景位置等。

本文将详细探讨 CSS 中的background属性，包括 5 个子属性的用法、作用以及实际应用案例，来让我们一起看看吧。

5 个子属性

一、 background-color：用于设置元素的背景颜色。可以使用十六进制值、RGB 值等来指定颜色。例如：

body {
  background-color: #00ff00; /* 使用十六进制值 */
  /* background-color: rgb(255, 0, 0); 使用RGB值 */
  /*background-color: rgba(255, 0, 0, 0.5);  使用带不透明度的RGB值 */
}

关于颜色的几种写法，可以看这篇文章。html基础：颜色的 5 种表示方法（最全！）

当然，这个背景颜色不止可以作用在 body 标签上，也可以为任何 HTML 元素设置背景颜色，比如 div,p,h1,ul,li,input 等，都可以的。

二、 background-image：用于设置元素的背景图片。它的取值形式主要包括以下 4 种：

  1. 图片路径：可以直接指定图片的路径，例如 url('image.jpg')。

  2. 线性渐变（Linear Gradient）：使用 linear-gradient() 函数来定义线性渐变背景。

  3. 径向渐变（Radial Gradient）：使用 radial-gradient() 函数来定义径向渐变背景。

  4. 其他图像类型（Other Image Types）：还可以使用其他图像类型，如SVG（Scalable Vector Graphics）图像等。

咱们今天先说最基础的第 1 种，后面的随着深入学习再说。第 1 种是图片路径，是通过url()可以指定图片的路径，可以是相对路径或绝对路径。例如：

body {
  background-image: url(./img/bg1.jpg);
}

页面所用图片 bg1.jpg 图片如下：

图片

当然，背景图像不止可以作用在 body 标签上，也可以为任何 HTML 元素设置背景颜色，比如 div,p,h1,ul,li,input 等，都可以。

三、 background-repeat：用于控制背景图片的重复方式。常用的取值包括：

属性值 说明
repeat 默认值，背景图片在水平和垂直方向上平铺重复显示。
repeat-x 背景图片在水平方向上平铺重复显示。
repeat-y 背景图片在垂直方向上平铺重复显示。
no-repeat 背景图片不重复，只显示一次。

例如，默认情况下，背景图片在水平和垂直方向上重复显示：

<!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>
      body {
        background-image: url(./img/bg2.png);
      }
    </style>
  </head>
  <body>
    <h1>hello,world!</h1>
    <h2>这背景，有点奇怪......</h2>
  </body>
</html>

页面所用图片 bg2.png 图片如下：

图片

效果如下：

图片

那其实是不是这个照片往一个水平方向比较好啊，所以，就可以让重复方向变为 repeat-x, 那元素的背景图片就会在水平方向上重复显示了。

<style>
  body {
    background-image: url(./img/bg2.png);
    background-repeat: repeat-x;
  }
</style>

效果如下：

图片

其他属性你可以自行试试。

四、 background-position：用于控制背景图片的位置。它的取值有三种类型：

  • 百分比值：指定背景图片位置相对于包含块的百分比。例如，background-position: 50% 50%; 表示背景图片在水平和垂直方向上都居中显示。

  • 像素值：指定背景图片位置相对于包含块的像素值。例如，background-position: 100px 50px; 表示背景图片距离包含块左侧 100 像素，距离顶部 50 像素。

  • 文字类取值。常用的取值包括：

属性值 说明
left top 背景图片在左上角显示。
left center 背景图片在左侧水平居中显示。
left bottom 背景图片在左下角显示。
center top 背景图片在顶部垂直居中显示。
center center 背景图片在水平和垂直方向上都居中显示。
center bottom 背景图片在底部垂直居中显示。
right top 背景图片在右上角显示。
right center 背景图片在右侧水平居中显示。
right bottom 背景图片在右下角显示。

例如，将背景图片位置设置在元素的右上角：

<!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-image: url(./img/bg3.png);
        background-repeat: no-repeat;
        background-position: right top;
      }
    </style>
  </head>
  <body>
    <h1>hello,world!像素值：指定背景图片位置相对于包含块的像素值。例如，`background-position: 100px 50px;` 表示背景图片距离包含块左侧 100 像素，距离顶部 50 像素。</h1>

    ...(把h1和内容复制16行，太长了，这里不写了)

    <h1>hello,world!像素值：指定背景图片位置相对于包含块的像素值。例如，`background-position: 100px 50px;` 表示背景图片距离包含块左侧 100 像素，距离顶部 50 像素。</h1>
    <h1>hello,world!像素值：指定背景图片位置相对于包含块的像素值。例如，`background-position: 100px 50px;` 表示背景图片距离包含块左侧 100 像素，距离顶部 50 像素。</h1>
  </body>
</html>

页面所用图片 bg3.png 图片如下：

图片

效果如图所示：

图片

这样设置后，背景图片就会在右上角显示。但是呢，还有一个问题，滚动页面的时候，会发现，图片跟着走了，如图。

图片

能不能滚动的时候，让背景图还固定到头部右上角不动呢？能，这就用到下一个属性了。

五、background-attachment ：用于设置背景图片的滚动方式，控制背景图片是否随页面滚动而滚动。

取值有三种：

当然可以，请看下面的表格：

属性值 说明
scroll 背景图片随页面滚动而滚动，默认值。
fixed 背景图片固定在视口的位置，不随页面滚动而滚动。
local 背景图片随着其所在的容器滚动而滚动，当容器滚动时，背景图片也跟随滚动，而不是整个页面。

根据上个案例，只需加上 background-attachment: fixed;属性，代码如下，就不会随着页面的滚动而滚动了。

<style>
  body {
    background-image: url(./img/bg3.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed; /* 背景图片固定 */
  }
</style>

效果如图：

图片

这个例子中，背景图片将会固定在浏览器窗口的位置，不会随着页面的滚动而滚动。

这些属性的取值可以根据设计需求灵活使用，可以为网页带来不同的视觉效果和布局。但是每次设置一个背景，需要写5个属性，太多了，能不能一行写完呢？可以。

background 的混合写法

其实呢，通过巧妙地组合不同的背景属性，我们可以创建出丰富多彩的页面背景效果。

如何混合写呢？就以上一个案例来写吧，增加一个绿色的背景颜色。

<style>
  body {
    background: #2cecbc url(./img/bg3.png) no-repeat right top fixed;
  }
</style>

效果如图：

图片

当然，这种写法要注意以下 3 点：

  • 属性顺序：通常情况下，background属性的写法顺序为：background-color、background-image、background-repeat、background-attachment、background-position。这些属性需要全写么？不必，按需。如果某些属性没有设置，则可以省略，但尽量保持顺序不变，比如，我完全可以把#2cecbc,right top去掉，直接就是background: url(./img/bg3.png) no-repeat fixed;,这样也没问题。

  • 简写方式：使用background属性可以简化代码，但需要确保各个属性值的顺序和含义正确，避免混淆和错误。

  • 可读性：尽量保持代码的可读性和易维护性，可以使用注释来说明各个属性的作用和含义，以便他人阅读和理解代码。

这样的设置，也达到了较为简洁而又美观的背景效果。

ok，以上，就是 background 的基础用法了，除了以上 5 个基础子属性，还有background-clip，background-origin，background-size等，这些需要依赖未来的学习，所以后续用到再说。

也欢迎加我w.x，和我交流。

图片