背景透明实现的方法 css: opacity 实例解说
我们可以用 div{opacity:0.5;} 来控制元素的不透明级别，所有浏览器都支持 opacity 属性，注意：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。为了提高兼容性，通常这么写：
1. background-color:red;
2. opacity:0.5;
3. filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */
如何实现背景渐变 linear-gradient
先了解下渐变怎么实现，使用 background 的属性 linear-gradient ，以下部分转载自网络：
> 渐变(Gradient)
> W3C标准渐变语法：
> linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)
> 1. <angle>：通过角度来确定渐变的方向。0度表示渐变方向从下向上，90度表示渐变方向从左向右。如果取值为下值，其角度按顺时针方向旋转。
> 2.关键词：通过关键词来确定渐变的方向。比如“to top”、“to right”、“to bottom”和“to left”。这些关键词对应的角度值为“0deg”、“90deg”、“180deg”和“270deg”。除了使用“to top”、“top left”之外，还可以使用“top left”左上角到右下角、“top right”左上角到右下解等。
> 3. 第二个和第三个参数，表示颜色的起始点和结束点。大家可以在从中插入更多的颜色值。
**举例：**
linear-gradient(to top, orange, green);——颜色从下向上由橙色变成绿色
linear-gradient(to top, red, orange,yellow,green,blue,indigo,violet);—–多种颜色的渐变
> 透明(RGBA)
> 语法：background:rgba(R , G , B , 透明值);
>
> eg:background:rgba(0,0,0,0.5);黑色背景透明度为半透明。
**rgba与opacity的区别：**
用opacity只能设置容器的背景透明，并且容器内的子集也会受到透明度的影响。rgba只要能用颜色的地方都能用它来设置透明度，且其透明度不会影响到容器的子集，它只对容器自身起作用。rgba的弊端，IE9以下均不支持。
对不支持rgba的浏览器采取”**fallback color**“的方式,”**fallback color**“的意思是我给IE备份一个色，在不支持RGBA的情况下，我照样给他一个色，而对rgba支持的浏览器并不会带来影响。
“**fallback color**“使用方法：给容器制作一张图片或都只给其加一个色。
注意：rgba支持的浏览器：IE9+、Firefox 3.0.10+、Chrome 2.0x+、Opera 9.64+、Safari 4+。
怎么实现透明度和背景渐变同时叠加呢？
使用下面这段代码就可以了，具体效果自己改动了调试吧
1. background-image: linear-gradient(
2. to rightright,
3. rgba(0,0,0,0) 0%,
4. rgba(0,0,0,0.4) 5%,
5. rgba(0,0,0,0.6) 10%,
6. rgba(0,0,0,0.6) 90%,
7. rgba(0,0,0,0.4) 95%,
8. rgba(0,0,0,0) 100%);
另外，方框和横线都可以实现颜色渐变：
1. # CSS
2. li.active {
3. color: #C66214;
4. background-origin: padding-box,border-box;
5. background-image: linear-gradient(135deg,#FFFFFF,#FFFFFF),linear-gradient(-90deg, #FFBA33 0%, #B3450A 100%);
6. border-bottom: .04rem solid;
7. border-image: linear-gradient(-90deg, #FFBA33, #B3450A);
8. }
好了，笔记就做到这里吧。