css手册前端干货！实用全面的CSS background 属性使用手册

背景是用来设置背景的元素。从最早的纯色填充到现在，不仅支持渐变，还可以使用混合模式！今天这篇好文章@小于布就给你一一讲解这些子属性的用法，周末学！

背景属性是用来设置CSS中元素背景的属性。背景属性最简单的名称是设置几个背景的组合缩写。最早的CSS只能使用一张背景图片，现在可以设置多张背景图片。没有图片，最早的背景只能用纯色填充，现在可以用各种渐变效果。现在使用的模型来自CSS背景和边框模块三级定义的规范，主要分为8个子属性。

背景色-背景色的颜色

背景色是最早、最古老、最常用的属性之一，其价值是独特的。

背景-背景图片的图像

背景——图像，顾名思义，设置背景“图片”。这里的图片不是我们通常理解的“图片”，而是CSS图像值和替换内容模块指定的一系列内容，用来替换CSS2中指定的背景-图像属性和列表-样式-图像属性中的url参数，或者作为伪元素内容的值。现在浏览器还没有完全实现这些，可用的有url()引用图片，渐变“图片”，然后用逗号分隔所有图片(如果有的话)。

CSS渐变

有两种CSS梯度，线性梯度的线性梯度()和径向梯度的径向梯度()。两种渐变的实现语法在早期的不同浏览器中差别很大，所以用的人比较少，还是倾向于用图片。现在每个浏览器的显示和实现基本一致，在手机上也实现的很好，可以广泛应用于移动开发(但是兼容IE9-时，还是╮ (╯ _ ╰) ╭).以下是

线性梯度:线性梯度(

& lt角度>。您可以选择顶部、底部、左侧、右侧和设置*度。0 deg(↏)相当于to bottom，90 deg(↏)相当于tolleft，以此类推。& lt开始>的值为

径向梯度:

径向梯度([[& lt；形状>。| | & ltsize>。][at & lt；位置>。]?，| at & lt位置>。, ]?& lt颜色-停止>;[，& lt颜色-停止>;]+)

我本想简化一下这个语法，简化成Jane，发现这样写会更好(毕竟是别人规范写的，也经过深思熟虑)，从后往前说

& lt颜色-停止>;如同线性梯度一样，

& ltsize>。就是大小，你可以定义渐变的数值半径。如果形状是椭圆形，需要依次填入水平半径和垂直半径两个尺寸值。此时，大小可以写成百分比。

尺寸也有四个关键词:最近边、最远边、最近角和最远角。这四个关键词指的是相对于元素的圆心，所以顾名思义就考虑一下吧。

& lt位置>。是圆心，前面需要有at。您可以使用位置中常用的关键字或使用数字定义。

例如，以下三行代码是等效的:

径向梯度(黄色、绿色)；径向梯度(椭圆在中心，黄色0%，绿色100%)；径向坡度(50% 50%处的最远角，黄色、绿色)；

重复渐变:重复线性渐变()和重复径向渐变()

用法同上，不过这次是重复渐变。这里有一些漂亮的Demo，当然主要是为了展现背景-融合-模式属性而构建的。

背景-背景重复的重复

background-repeated ad用于设置背景的重复模式，有以下可选值:

不重复就是不重复，相当于不重复，不重复，重复-x(横向)，重复，不重复，重复-y(纵向)，不重复，重复，重复，重复，重复，重复

除了这四个常用的之外，还有两个…很可能不被人使用，兼容性也不是很好:圆形图像是按指定方向平铺的，图像会根据显示器空之间的大小进行缩放(何时缩放，何时增减平铺数由浏览器决定)。空间图像会尽量重复，但不剪切，第一个和最后一个固定在元素两端，其余均匀分布。此时，背景位置属性被忽略。此外，裁剪仅在图像大于元素时发生。

背景-带有固定背景的附件

背景-附件用于设置背景的相对固定模式。可选值有:

滚动默认，背景相对于元素是固定的。固定背景相对于整个窗口是固定的。随着最近全屏幕大图像网站的流行，这种固定背景模式越来越普遍。本地背景相对于元素的内容是固定的。如果元素中有滚动条，背景将随着内容滚动。

我们几乎不用本地模式。这里有一篇文章。作者写了一个Demo。当滚动条出现在一个元素上时，阴影将出现在其滚动方向上。虽然属于交互设计领域，但随着各个网站更加注重用户体验，这种需求只是时间问题，作者的Demo是一种非常有趣(且高效)的实现方式。

背景-背景位置的位置

background-position，顾名思义，就是用来定位的…但是这个定位…语法很复杂(或者随便)。指示方向的可用关键字也可以是数字单位或百分比，它们以下列方式书写:

并排写两个关键字(或值)，第一个值代表它的水平位置，第二个值代表它的垂直位置(这正好和填充、边距、边框相反，上下左右……)。另外，如果两者都是关键词，可以互换仓位，也就是说中左合法，左50%不合法。只写一个关键字(或值)，其第二个值将默认为居中。可以从元素的外围定位三个或四个值，例如，从右侧定位10px，从底部定位5px，这可以写成右侧10px底部5px。两组键值对可以交换位置，或者用中心代替键值。目前(2016-06)这种写法只有FF支持。

背景-用于背景剪辑的剪辑

背景剪辑是一个设置背景覆盖范围的属性。可选值有:

边框的默认值是背景延伸到边框以下，但是只有当边框的颜色是半透明的时，才能看到延伸的背景。填充框边框下没有背景。内容框只在内容下有背景(填充的空没有背景)

背景-背景原点的原点

背景-原点指定背景图像定位的原点。属性值与背景-剪辑相同，但剪辑剪切背景图片，原点用于定位。

你可以看看这个演示，它显示得很清楚。

背景-背景大小的大小

背景尺寸用于设置背景尺寸，可选值有:

一对值百分比或自动，百分比是相对于背景-原点设置的大小，自动是图片的原始大小，两个值先宽后高。Cover缩放图片，使其完全覆盖背景区域，这可能会使图片的某些区域不可见。包含缩放图片，使其可以完全显示在最大尺寸的背景区域，这可能会导致背景的某些区域变成空白色。

变形金刚的背景

背景是以上八个属性的总和…所有属性都可以写在一起。顺序不限，但可以用空隔开，但有几点需要注意:

如果需要设置背景大小，写的是

飞人多背景

从CSS3时代开始，CSS背景开始支持多个背景图片，设置在一起。

只要每个背景图片用逗号隔开，浏览器就会依次加载，把写在背面的折叠在上面。

对于单独设置的背景属性，也可以用逗号分隔，单独设置。但是如果你只想设置一张图片的具体属性，那就要写下其他的…

而且，背景颜色是唯一的(摊手)，使用背景缩写时，背景颜色要设置在最后一个逗号之后。

还有什么？

另外，在去年最新的《合成与混合》草案中，提出了混合模式的规范草案，与背景相关的属性是背景-混合-模式。写这篇论文的时候，只有Chrome和FF浏览器支持这个属性。

如果你玩过Photoshop的话，应该听说过Photoshop中的混合模式，它们的意思差不多。背景混合模式的可选参数包括:正常、倍增、屏幕、叠加、变暗、亮色、颜色减淡和颜色加深。强光，柔光，差异，排除，色相，饱和度，颜色，光度。

我直接根据Photoshop的混合模式把这些参数翻译成中文(传统用户可以在这里参考)。规范草案中也给出了各种混合模式的算法和演示效果。因为时间问题，我就不一一验证效果了。如有不符，以实际效果为准。MDN上有实际演示的Demo，我前面提到的网站上也有很多实际演示。

当然，这些混合模式也可以应用于其他图像(如SVG)。我觉得这只是为了让那些设计师和前端工程师少一些争吵，多一些诚意。

参考数据

MDN相关页面:除了以上，还有关于是否可以应用于CSS动画和兼容性的相关资料。W3C规范:原始规范文档

【技术多不压自己的设计师工资高！】

平面设计:“牛逼！设计师完全自学交互设计指南:交互设计师实践指南！教你从零开始成为一名优秀的交互设计师。UI设计:超级实用新手指南！如何零基础自学UI设计。”前端开发:“天猫大师教你！零基础如何系统学习前端开发。”挖掘技巧:“从菜鸟到高手！PHOTOSHOP挖土全能攻略配色:配色快！3个实用方法帮你获得全面的配色《DPI指南》:“学基础知识！专为设计师量身定制的DPI指南《交互设计自学路径图》:“零基础入门！非本科学生自主学习路径图的交互设计