你可能不是那么了解的 CSS Background

前言

Background，写过 CSS 的朋友们肯定都知道这个属性的作用，顾名思义，背景嘛。 MDN
中对其的定义如下：

Background是一种 CSS
简写属性，一次性定义了所有的背景属性，包括 color, image, origin 还有 size, repeat 方式等等。

我们首先讲一下 Background
的日常语法：

• Background
  可以使用简写或者单独设置其中一项：
  • 简写语法
    • 官方推荐顺序为： background: background-color，background-image，background-repeat，background-attachment，background-position;
    • 不强制要求书写顺序
  • 单独设置样式

Background 基础篇

这里给大家展示一下几个常见的 background
的属性的用法：

    .div1 {
        width: 100px;
        height: 100px;
        background-color: black;
        background-image: url('img1');
        background-size: 50%;
        background-repeat: no-repeat;
    }


    

• background-color
  背景颜色
  • 属性值可设置为：

（1）单词： background-color: black;

（2）十六进制： background-color: #000;

（3）RGB 色彩模式： background-color: rgb(0, 0, 0);

• background-image
  背景图片

  background-image: url('')
  

• background-size
  背景图片尺寸
  • 常用属性值有：

（1）百分比： background-size: 100%;

（2）像素值： background-size: 100px;

• 当只设置一个值时，默认为宽度，而高度按比例自适应。
  • background-repeat
    背景图片重复
• 常用属性值有：

（1）repeat (重复)： background-repeat: repeat;

（2）repeat-x (横向重复)： background-repeat: repeat-x;

（3）repeat-y (纵向重复)： background-repeat: repeat-y;

（4）no-repeat (不重复)： background-repeat: no-repeat;

Background 进阶篇

多背景图片 background-image

在 CSS2.1 中，元素只能添加一张背景图片。然而在 CSS3 中，我们可以给元素添加多张背景图片。其兼容性如下图所示：

• 多张背景图片可针对每一张设置单独的样式，对应样式用逗号分隔

  .div1 {
    width: 100px;
    height: 100px;

    background-color: black;
    background-image: url('img1'), url('img2');
    background-size: 50%, 100%;
    background-repeat: repeat-x, no-repeat;
  }


  

• 如果属性值的个数与图片个数不相等呢？

  .div1 {
    width: 100px;
    height: 100px;

    background-color: black;
    background-image: url('img1'), url('img2'), url('img3');
    background-size: 50%, 30%;
    background-repeat: repeat-y, no-repeat;
  }


  

多背景图片总结：

background-color

背景渐变 background-image: linear-gradient

背景渐变是基于 background-image
来设置的。具体语法详见 MDN
。其兼容性如下图所示：

• background-image: linear-gradient
  路径渐变（可手动设置方向，默认自下向上）
• linear-gradient() 的用法如下用法: ( 详见 MDN
  )

linear-gradient( [

| to
,]?
[, ]+ )
：用角度值指定渐变的方向

：[left | right] || [top | bottom]

：
[
| ]?

• 例: background: linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%);

  .div1 {
    background - image: linear-gradient(#71c9ce, #e3fdfd);;
  }


  

• background-image: radial-gradient
  径向渐变
• radial-gradient 用法如下：(详见 MDN
  )

radial-gradient( [ [ellipse | circle] || [
|
] [ at
]? ] ?
[ , ]+ )
= closest-corner | closest-side | farthest-corner | farthest-side

：
[
| ]?

• 例: background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);

  .div1 {
    background - image: radial-gradient( #71c9ce, #e3fdfd);;
  }


  

• background-image: repeating-linear-gradient
  重复路径渐变

  .div1 {
    background - image: repeating-linear-gradient(45deg, #71c9ce 20px, #a6e3e9 30px, #e3fdfd 40px);
  }


  

• background-image: repeating-radial-gradient
  重复径向渐变

  .div1 {
    width: 100px;
    height: 100px;

    background-color: black;
    background-image: repeating-radial-gradient(circle, #90ade4 ,#3350ba 20%);
  }


  

背景定位 background-position

在讲以下内容之前，我们先科普一下一个元素所涉及的三个盒子，请看图↓

上图三个盒子分别为 content-box
（内容盒子）、 padding-box
（内边距盒子）和 border-box
（边框盒子）。

• border-box
  即所设置元素的 border
  所占的区域，位于 padding
  和 content
  的外层
• padding-box
  即所设置元素的 padding
  所占的区域，位于 border
  的内层、 content
  的外层
• content-box
  元素的 padding
  所占区域包围着的即为 content

background-position
默认的定位为 padding-box
盒子的左上角。

• 其属性值可设置为

（1）百分比（%)
（2）像素（px）

（3）位置（ top | right | bottom | left | center
）

center
padding-box

  .div1 {
    width: 100px;
    height: 100px;

    background-image: url('img1');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: right;
  }


  

背景重复 background-repeat

background-repeat
除了常见的几个 repeat、repeat-x，repeat-y 以及 no-repeat 以外，还在CSS3 中新加了两个值： space
和 round
。其兼容性如下图所示：

• 背景图片小于容器时

  • background-repeat:space
    在保证不缩放的前提下尽可能多的重复图片，并等分图片中间的空隙

    

  • background-repeat:round
    在尽可能多的重复图片的前提下，拉伸图片以铺满容器

    

• 背景图片大于容器时
  • background-repeat:space
    在不缩放的前提下裁剪图片，只保留在容器内的部分

  

  • background-repeat:round
    缩小图片以铺满容器，长宽与容器尺寸一致（未按比例缩放，图片极有可能变形）

背景相对位置 background-origin

background-origin
属性规定 background-position
属性相对于什么位置来定位。属性值有 content-box
、 padding-box
、 border-box
三个，默认为 padding-box
。其兼容性如下：

• background-origin: content-box
  (下图为设置 padding: 20px )

  

• background-origin: padding-box

  

• background-origin: border-box

  

背景绘制区域 background-clip

background-clip
属性规定背景的绘制区域。默认值为 border-box
，其属性值同 background-origin
一样，不过表现大不相同。其兼容性如下：

• background-clip: content-box

  

• background-clip: padding-box

  

• background-clip: border-box`

  

​

背景大小 background-size

感觉这个属性很常见吧，其实它也是 CSS3 中新加的属性。 CSS2.1 中，背景图片大小是无法设置的。 background-size
除了常见的设置大小和百分比之外，还有两个特殊的属性： contain
和 cover

• background-size: contain
  图片长宽不相同时，把图片按比例缩小至较长的一方完全适应内容区域为止，多用于背景图片比元素大的情况。

  

• background-size: cover
  图片长宽不相同时，把图片按比例放大至较短的一方完全适应内容区域为止，以使背景图像完全覆盖背景区域，多用于背景图片比元素小的情况。

  

背景固定 background-attachment

有时候在一些网站上会看到，滚动页面的时候，背景图片是固定的。那就是使用 background-attachment: fixed
做到的。

• background-attachment: fixed
  背景固定

• background-attachment: scroll
  背景随页面滚动而滚动（默认）

扩展属性 background: element

一个特殊的扩展属性，可以将某个元素设置为另一元素的背景。惊不惊喜，意不意外！不过这个属性只有 FireFox 4+ 的浏览器可以使用，并且需要加上浏览器前缀。

• background: element(#id)
  • demo1 作为背景的是非图片元素时，背景样式与原元素相同

  .div {
    width: 200px;
    height: 200px;
    background: element(#button)  no-repeat;
    background: -moz-element(#button)  no-repeat;
  }
  #button {
    width: 150px;
    height: 20px;
    margin: 50px;
    color: #0470f4;
  }


  

    这是按钮
  

• demo2 当设置为背景的元素是图片时，背景图不会随原图的大小样式改变而改变，不过平铺等背景样式依然是支持的

  .div {
    width: 200px;
    height: 200px;
    border: 10px dashed #0ff;
    background: element(#img1);
    background: -moz-element(#img1);
  }
  #img1 {
    width: 50px;
  }


  

    
  

结语

CSS 中还有许许多多的我们未知的东西，我们正在一点点探索，期待与你同行。如果你也有什么新发现，欢迎与我们一起讨论~