Background of CSS3

Background of CSS3

此节知识点杂但是比较简单，容易理解，所以配图会少。

background-image

可以添加一个或多个背景图片：

background-image:url()，url();

多url应用在开发中应用不多，在开发中常见的形式是：

放两张图片，如果第一张图片因为网速问题没加载出来，就先加载第二张用来容错的图片，第二张图片像素值非常低。

支持渐变颜色生成器：

background-image:linear-gradient();

background-size

可以设置一张或多张图片的大小：

background-size:100px 100px, 100px 200px;

这个属性还有两个设定好的值：

cover

让背景图片等比例缩放到可以覆盖整个容器。

contain

让背景图片等比例缩放到最大的，而且能被容器包含的程度。

background-origin

设置图片是从哪里开始展示的，也就是图片的左上角是与哪个区域的左上角相对定位，默认值为：

background-origin:padding-box;

这个属性还有其他两个属性值：

content-box、border-box。

background-clip

设置的是背景图片从哪里开始截断，有四个属性值：

border-box、padding-box、content-box、text。

用的比较多的值是text，要配合其他几个值来使用：

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-fill-color:transparent;

用文字的区域来截取背景图片，只有显示文字体的地方显示背景图片。

background-repeat

background-repeat:no-repeat;

设置no-repeat之后，同一个盒子里面的图片不会重复显示，只会显示一次。

background-repeat:repeat-x;

设置repeat-x或者repeat-y之后，只会在x轴方向或者y轴方向重复。

这个值是相当于两个值的，一个方向repeat以后，另一个方向就是no-repeat，所以这两个值不支持填两个值。

background-repeat:round;
background-repeat:space;

这两个值的效果类似于border-image-repeat里面对应的两个值。

这个属性里面可以放两个值：

background-repeat:round space;

这样的话，横向的样式是round，纵向的样式是space。

background-position

指定背景图像在盒子中出现的位置。

可以用像素值定位，也可以用百分比，但是如果设置三个或四个值的话，偏移量之前都必须跟着一个边界关键字：

background-position：right 10px bottom 20px；

也可以用center值让图片居中显示。

background-attachment

这个属性可以改变背景图片的定位方式，默认值是：

scroll

background-attachment:scroll;

这个值的意思是：相对于容器定位。

CSS3添加了两个新值：

local

这个值是让背景图片相对于内容定位；

fixed

这个值让背景图片相对于可视区窗口进行定位，但是不会超出容器的范围进行显示。

注意：CSS3对fixed值进行举例时，例子是不恰当的，他将背景图片放在了body容器里面，body的大小等于内容小，图片永远不会超出可视区，展现不出这个值的特点。

补：渐变色生成器

linear-gradient

background-image: linear-gradient(180deg, #0f0, #ff0);

第一个值是角度，180deg是默认值。

background-image: linear-gradient(#0f0 20px, #ff0 60px, #00f 80px);

也可以设置颜色的截止位置，填像素和百分比都可以。

radial-gradient

background-image: radial-gradient(#0f0 20%, #ff0 50px, #0ff);

这个是辐射形渐变，可以设置圆心和半径：

background-image: radial-gradient(circle closest-corner at 50px 50px, #0f0 20%, #ff0 50px, #0ff);

circle是圆形，也可以换成ellipse椭圆；closest-corner是半径，截止到最近的顶点，还有其他三个值：closest-side最近的边、farthest-corner最远的顶点、farthest-side最远的边；at后面跟着的是圆心位置，也可以设置成顶点。

这里还有一个关于border-color 底层的小知识点：

在CSS1 和CSS2 中，如果不设置border-color的值，他会计算盒子的color值，然后用到border-color里面去；在CSS3中，会让border-color等于一个中转变量currentColor的值，让currentColor去计算color值，也就是说currentColor就是border-color的默认值。

在CSS1 和CSS2 中，如果不设置border-color的值，他会计算盒子的color值，然后用到border-color里面去；在CSS3中，会让border-color等于一个中转变量currentColor的值，让currentColor去计算color值，也就是说currentColor就是border-color的默认值。