css基础背景属性
background-color
background-image: url();
background-repeat: repeat | no-repeat | repeat-x | repeat-y;
background-attachment: fixed | scroll;
background-position: left top | center | 20% 50%;
简写背景属性background简写顺序如上，属性缺失也没关系，只要按照上面的顺序设置其他值即可， 如
body {background: #ffffff url("tree.png") no-repeat right top;}
css3背景属性
多个背景
#example1 {background-image: url(flower.gif), url(paper.gif);background-position: right bottom, left top;background-repeat: no-repeat, repeat;}// 简写#example1 {background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;}
背景尺寸 background-size
background-size:80px 60px | 100% auto | cover | contain;
contain关键字将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。
cover关键字会缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。这样，背景图像的某些部分可能在背景定位区域中不可见。
background-clip 属性
规定背景的绘制区域
background-clip: content-box | border-box | padding-box;
background-origin 属性
CSS background-origin 属性指定背景图像的位置。
background-origin: content-box | border-box | padding-box;
css背景特殊用法
背景颜色background-color
opacity属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。使用RGBA的透明度，设置背景色而不是文本的不透明度
rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
// 改变背景色且子元素继承相同的透明度div.first {background-color: green;opacity: 0.1;}// 只改变背景色透明度，不影响子元素或文本#p1a {background-color: #ff000080;} /* 带透明度的红色 */#p1 {background-color: rgba(255, 0, 0, 0.3);} /* 带不透明度的红色 */
背景颜色渐变
background: linear-gradient(to top, #2dedfc, #fcffff);
currentcolor 关键字
currentcolor 关键字引用元素的 color 属性值。
#myDIV {color: blue; /* 蓝色文本色 */border: 10px solid currentcolor; /* 蓝色边框色 */}
background-blend-mode 属性
定义每个背景层（颜色和/或图像）的混合模式
多个属性值，详见/cssref/pr_background-blend-mode.asp
div { background-repeat: no-repeat, repeat;background-image: url("img_tree.gif"), url("paper.gif");background-blend-mode: lighten;}
css背景应用
用css实现文字颜色渐变
<h1>两栖合成旅指挥所信息系统筹划开设虚拟训练</h1>h1 {font-size: 48px;background-image: -webkit-linear-gradient(bottom, #2dedfc, #fcffff);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;margin: 0;}
-webkit-box-reflect 倒影
-webkit-box-reflect是html5的新特性
box-reflect属性值有：dirrection-方向:above向上，below向下，left向左，right向右。
offset距离：可以是数值，也可以是百分比
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, leftbottom, from(transparent), to(rgba(250, 250, 250, 0.5)));
