css背景属性bacground实现字体颜色渐变

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

1. opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明
   使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。
2. 使用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);}   /* 带不透明度的红色 */

3. 背景颜色渐变

background: linear-gradient(to top, #2dedfc, #fcffff);

currentcolor 关键字

currentcolor 关键字引用元素的 color 属性值。

#myDIV {
  color: blue; /* 蓝色文本色 */
  border: 10px solid currentcolor; /* 蓝色边框色 */
}

background-blend-mode 属性

定义每个背景层（颜色和/或图像）的混合模式
多个属性值，详见https://www.w3school.com.cn/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 {
    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, left
          bottom, from(transparent), to(rgba(250, 250, 250, 0.5)));