CSS背景相关属性

　　CSS样式可以精确控制HTML元素的背景、边框的样式和外观，也可以精确控制边框的线型和形状。其中，背景相关属性可以用于控制背景色、背景图片等属性。在控制背景图片的同时还可以控制背景图片的排列方式。

　　常用的背景相关属性如下：

• background：设置对象的背景样式，是一个复合属性，可以用于同时设置背景色、背景图片、背景重复模式等属性。

　　该复合属性可以分开写为以下几个属性：

• background-color：设置背景色。如果同时设置了背景色和背景图片，则背景图片将覆盖背景色。
• background-image：设置背景图片。该属性需要使用url()函数指定图片地址，图片地址既可以是相对地址，也可以是绝对地址。
• background-repeat：用于设置对象的背景图片是否平铺。在指定该属性之前，必须先指定background-image属性。其属性值有repeat（平铺）、no-repeat（不平铺）、repeat-x（仅在横向平铺）和repeat-y（仅在纵向平铺）。CSS 3 为该属性新增了space和round，这两个属性值用于保证图片不会被裁减。其中，round通过自动调整背景图片的大小来达到目的，而space是调整背景图片的间距。
• background-attachment：用于设置背景图片是随对象内容滚动还是固定的。该属性支持以下两个值：
• scroll：指定背景图片会随元素里内容的滚动而滚动。是默认值。
• fixed：背景图片固定，不会随元素里内容的滚动而滚动。
• background-position：用于设置对象的背景图片位置。该属性需要横坐标和纵坐标两个值。（当一个网页中的小图标非常多时，通常会使用雪碧图以达到减少加载网页图片时对服务器的请求次数的目的，在使用雪碧图时，就需要使用background-position来定位显示出相应的小图标）

　　

　　除了以上几个属性外，CSS 3 中新增了几个背景相关属性。

　　1、background-clip：用于设置背景图片的覆盖范围

　　　　该属性支持以下几个属性值：

• border-box:指定背景覆盖盒模型的边框区（border）、内填充区（padding）、内容区（content）
• no-clip：指定背景覆盖盒模型的边框区（border）、内填充区（padding）、内容区（content）
• padding-box：指定背景覆盖盒模型的内填充区（padding）、内容区（content）
• content-box：指定背景覆盖盒模型的内容区（content）

　　盒模型相关概念请查看：https://www.cnblogs.com/web12/p/9925742.html

2、background-origin：用于设置背景覆盖的起点

该属性支持以下几个属性值：

• • border-box:指定背景图片从边框区开始覆盖
  • padding-box：指定背景图片从内容填充区开始覆盖
  • content-box：指定背景图片从内容区开始覆盖

3、background-size：用于设置背景图片的大小

　　　　该属性由两个值组成，分别代表图片的宽度、高度。可以设置具体的长度值，也可以指定百分比（为它所在元素的宽或高的百分比），还可以设置为auto（指定背景图片保持纵横比缩放，宽度、高度只能有一个被指定为auto，表明宽度、高度会以保持纵横比的方式自动计算出来）。

　　CSS3允许为以上几个属性指定多个属性值（属性值之间以英文逗号隔开）以此来实现多背景图片的效果。

　　CSS3还为背景提供了线性渐变和径向渐变支持，使得开发者可以进行更多灵活的背景设置。

• 使用linear-gradient设置线性渐变

　　语法格式为：background-gradient：linear-gradient（渐变方向，颜色列表）

　　方向参数支持如下：

角度	用英文	作用
0deg	to top	从上到下
90deg	to right	从左到右
180deg	to bottom	从上到下
270deg	to left	从右到左
	to top left	右下角到左上角
	to top right	左下角到右上角

　　CSS3还提供了repeating-linear-gradient设置循环线性渐变，这种渐变将会循环利用给出的渐变颜色。下面页面代码示范了循环线性渐变的功能。

<head>
　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 循环线性渐变 </title>
    <style type="text/css">
    /* 为div元素增加边框 */
    div{
        height: 400px;
        width: 400px;
    }
    </style>
</head>
<body>
background:repeating-linear-gradient(red, blue 10%, magenta 20%)<br>
红、蓝、洋红循环线性渐变
<div id="dv1" style="background:repeating-linear-gradient(red, blue 10%, magenta 20%);"></div>
<!-- 为input滑动事件（range）绑定onchange事件处理器 -->
角度：<input style="width:360px" type="range" min="0" max="360" value="0"
    onchange="change(this.value);">
<script type="text/javascript">
function change(val){
    var s = "linear-gradient(" + val + ", red, blue)";
    document.getElementById("dv1").style.background =
        "repeating-linear-gradient(" + val + "deg, red, blue 10%, magenta 20%)";
}
</script>
</body>

其效果如下：

　　

• 使用radial-gradient设置线性渐变

　　其语法格式如下：

　　　　background：radial-gradient（形状？大小？at x坐标 y坐标，颜色列表）

　　radial-gradient语法格式可分为4个部分

• 形状：指定径向渐变的形状，目前支持circle和ellipse两种形状。该属性值可以被省略，如果省略，将由浏览器感觉被添加背景的HTML元素的形状来决定渐变的形状。
• 大小：指定径向渐变的大小。这部分也可以省略，如果省略，也将由浏览器来决定，通常会占满整个HTML元素。
• 圆心：圆心部分必须由at关键字开头，后面紧跟圆心的x坐标和y坐标。这部分也可以省略，如果省略，则默认为HTML元素的中心。x坐标和y坐标支持如下写法：
  • left：代表x坐标的最左边
  • center：可代表x左边和y坐标的中间
  • right：代表x坐标的最右边
  • top：代表y坐标的最顶部
  • bottom：代表y坐标的最底部
  • 数值：支持长度值和百分比，可代表x左边和y坐标的值
• 颜色列表：可以指定多个颜色