林三在线

前几天搞了个问卷调查，是教育局工作，但是领导的任务清单很散乱，所以我做了个网页，方便宣传的开展。就是这个网页，两天浏览量破6000，说明大家还是很配合的，这才让我想到手机浏览此站的体验。用iphonese和xiaomi6都进行了测试，发现很多地方显示不佳，就花了个把小时优化了手机显示，顺便改良了菜单背景。

背景透明实现的方法 css: opacity 实例解说

我们可以用 div{opacity:0.5;} 来控制元素的不透明级别，所有浏览器都支持 opacity 属性，注意：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。为了提高兼容性，通常这么写：

 如何实现背景渐变 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+。

怎么实现透明度和背景渐变同时叠加呢？

使用下面这段代码就可以了，具体效果自己改动了调试吧

另外，方框和横线都可以实现颜色渐变：

好了，笔记就做到这里吧。