CSS3---关于背景

1.background-origin：设置元素背景图片的原始起始位置。

　　　background-origin ： border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。（注意：如果背景不是no-repeat，这个属性无效，它会从边框开始显示。）

2.background-clip:用来将背景图片做适当的裁剪以适应实际需要。

　　background-clip ： border-box | padding-box | content-box | no-clip; 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style type="text/css">
        div{
            border: 15px dashed green;
            background-color: black;
            padding: 30px;
            color: white;
            font-size: 30px;
            font-weight: bold;
            background-image: url("picture/1.jpg");
            background-repeat: no-repeat;
            -webkit-background-size: 40px 40px;
            background-size: 40px 40px;
        }
        .div1{
            background-origin: border-box;
            background-clip: border-box;
        }
        .div2{
            background-origin: padding-box;
            background-clip: padding-box;
            margin-top: 40px;
        }
        .div3{
            background-origin: content-box;
            background-clip: content-box;
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <div class="div1">示例1</div>
    <div class="div2">示例2</div>
    <div class="div3">示例3</div>
</body>
</html>

结果：

3.background-size:设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

　　background-size: auto | <长度值> | <百分比> | cover | contain

　　1、auto：默认值，不改变背景图片的原始高度和宽度；

　　2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

　　3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

　　4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

　　5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

4.multiple backgrounds:多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值.

语法缩写如下：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

background-image:url1,url2,...,urlN;

background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;

注意：

用逗号隔开每组 background 的缩写值；
如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
background-color 只能设置一个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style type="text/css">
        .div4{
            width: 500px;
            height: 600px;
            border: 5px solid #ff6471;
            background-image:url("picture/2.jpg") ,url("picture/1.jpg");
            background-repeat: repeat-x,no-repeat;
            background-position:center left;
            background-size:80px auto, 500px auto;
        }
    </style>
</head>
<body>
    <hr/>
    <div class="div4">

    </div>

</body>
</html>

结果：

　背景颜色渐变：

　　1.linear-gradient()

　　　　backgroud:linear-gradient(起点，起点颜色，过度色[可选]，终点颜色)

　　起点：top是从上到下，left是从左到右，如果定义成left top左上到右下。

　　过渡色：可以插入多个，表示多种颜色的渐变

　　2.radial-gradient()

　　　　方法创建一个<image>，用来展示由原点（渐变中心）辐射开的颜色渐变。这个方法得到的是一个CSS<gradient>数据类型的对象。

径向渐变(Radial gradients)由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定义而成。径向渐变的中心点至边缘形状以及其延伸的部分，由连续缩放的若干同心轮廓组成，这个轮廓由设定的边缘形状决定。色值结束点用于设定虚拟渐变射线（virtual gradient ray）的变化方式，由中心点水平变化至右侧（如图）。色值结束点由百分比设定时，则是相对于终点为渐变射线与边缘形状相交点的渐变半径，渐变半径的终点位置即为100%。每个轮廓均为纯色，颜色由渐变射线上相应横切点所定义的颜色决定。

边缘形状只能为圆形或者椭圆形,radial-gradient方法不允许循环渐变。需要循环渐变repeating-radial-gradient