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

时间  2020-01-14
标签 可能 不是 那么 了解 css background 栏目 CSS 繁體版
原文   原文链接
本文首发于政采云前端团队博客： 你可能不是那么了解的 CSS Background

前言

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

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

咱们首先讲一下 Background 的平常语法：前端

  • Background 可使用简写或者单独设置其中一项：css3

    • 简写语法json

      • 官方推荐顺序为： background: background-color，background-image，background-repeat，background-attachment，background-position;
      • 不强制要求书写顺序
    • 单独设置样式
值 说明 默认值 版本
background-color 指定要使用的背景颜色 transparent CSS2.1
background-position 指定背景图像的位置 0%, 0% CSS2.1
background-image 指定要使用的一个或多个背景图像 none CSS2.1
background-repeat 指定如何重复背景图像 repeat CSS2.1
background-attachment 设置背景图像是否固定或者随着页面的其他部分滚动。 scroll CSS2.1
background-size 指定背景图片的大小 auto CSS3
background-origin 指定背景图像的定位区域 padding-box CSS3
background-clip 指定背景图像的绘画区域 border-box CSS3

Background 基础篇

这里给你们展现一下几个常见的 background 的属性的用法：浏览器

<style>
    .div1 {
        width: 100px;
        height: 100px;
        background-color: black;
        background-image: url('img1');
        background-size: 50%;
        background-repeat: no-repeat;
    }
</style>
<body>
    <div class="div1"></div>
</body>

图片

  • background-color 背景颜色ide

    • 属性值可设置为：

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

（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 中，咱们能够给元素添加多张背景图片。其兼容性以下图所示：

    图片

    • 多张背景图片可针对每一张设置单独的样式，对应样式用逗号分隔
    <style>
  .div1 {
    width: 100px;
    height: 100px;
  
    background-color: black;
    background-image: url('img1'), url('img2');
    background-size: 50%, 100%;
    background-repeat: repeat-x, no-repeat;
  }
</style>
<body>
  <div class="div1"></div>
</body>

    图片

    • 若是属性值的个数与图片个数不相等呢？
    <style>
  .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;
  }
</style>
<body>
  <div class="div1"></div>
</body>

    图片

    多背景图片总结：

    • 背景图片所生效的样式，是属性值中与图片位置对应的值；
    • 若是属性值比背景图片的个数要少，那么没有对应的值的图片样式以第一个值为准；
    • 背景图片的层级按着从左往右，依次减少。固然，层级最低的仍是 background-color；

    背景渐变 background-image: linear-gradient

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

    图片

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

    linear-gradient( [<angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )

    <angle>：用角度值指定渐变的方向

    <side-or-corner>： [left | right] || [top | bottom]

    <color-stop>：<color> [ <percentage> | <length> ]?

    • 例: background: linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%);
    <style>
  .div1 {
    background - image: linear-gradient(#71c9ce, #e3fdfd);;
  }
</style>
<body>
  <div class="div1"></div>
</body>

    图片

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

    radial-gradient( [ [ellipse | circle] || [ <extent-keyword> | <precentage> ] [ at <position> ]? ] ? <color-stop> [ , <color-stop> ]+ )

    <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side

    <color-stop>：<color> [ <percentage> | <length> ]?

    • 例: background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
    <style>
  .div1 {
    background - image: radial-gradient( #71c9ce, #e3fdfd);;
  }
</style>
<body>
  <div class="div1"></div>
</body>

    图片

    • background-image: repeating-linear-gradient 重复路径渐变
    <style>
  .div1 {
    background - image: repeating-linear-gradient(45deg, #71c9ce 20px, #a6e3e9 30px, #e3fdfd 40px);
  }
</style>
<body>
  <div class="div1"></div>
</body>

    图片

    • background-image: repeating-radial-gradient 重复径向渐变
    <style>
  .div1 {
    width: 100px;
    height: 100px;

    background-color: black;
    background-image: repeating-radial-gradient(circle, #90ade4 ,#3350ba 20%);
  }
</style>
<body>
  <div class="div1"></div>
</body>

    图片

    背景定位 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 或 50% 。
    • padding-box 盒子的左上角坐标为 (0, 0) / (left, top)，右下角为 (100, 100) / (right, bottom)。
    • demo
    <style>
  .div1 {
    width: 100px;
    height: 100px;

    background-image: url('img1');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: right;
  }
</style>
<body>
  <div class="div1"></div>
</body>

    图片

    背景重复 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

      ![图片](https://zcy-cdn.oss-cn-shanghai.aliyuncs.com/f2e-assets/ec1869f2-c936-4190-9afb-1489eecc1b00.jpg)
    • background-origin: border-box

      图片

    背景绘制区域 background-clip

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

    图片

    • background-clip: content-box

      图片

    • background-clip: padding-box

      ![图片](https://zcy-cdn.oss-cn-shanghai.aliyuncs.com/f2e-assets/a66348a8-6a3b-41cf-95ca-ebb7d6794732.jpg)
    • 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 做为背景的是非图片元素时，背景样式与原元素相同
    <style>
  .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;
  }
</style>
<body>
  <div class="div1">
    <button id='button'>这是按钮</button>
  </div>
</body>

    图片

    • demo2 当设置为背景的元素是图片时，背景图不会随原图的大小样式改变而改变，不过平铺等背景样式依然是支持的
    <style>
  .div {
    width: 200px;
    height: 200px;
    border: 10px dashed #0ff;
    background: element(#img1);
    background: -moz-element(#img1);
  }
  #img1 {
    width: 50px;
  }
</style>
<body>
  <div class="div1">
    <img id='img1' src='img1' />
  </div>
</body>

    图片

    结语

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

    参考文章

    招贤纳士

    政采云前端团队（ZooTeam），一个年轻富有激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 50 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在平常的业务对接以外，还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战，推进并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。

    若是你想改变一直被事折腾，但愿开始能折腾事；若是你想改变一直被告诫须要多些想法，却无从破局；若是你想改变你有能力去作成那个结果，却不须要你；若是你想改变你想作成的事须要一个团队去支撑，但没你带人的位置；若是你想改变既定的节奏，将会是“5 年工做时间 3 年工做经验”；若是你想改变原本悟性不错，但老是有那一层窗户纸的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但愿参与到随着业务腾飞的过程，亲手推进一个有着深刻的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我以为咱们该聊聊。任什么时候间，等着你写点什么，发给 ZooTeam@cai-inc.com

    相关文章
    相关标签/搜索
    每日一句
      每一个你不满意的现在，都有一个你没有努力的曾经。
    本站公众号
       欢迎关注本站公众号,获取更多信息
    联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程