制作渐变背景色移动菜单之学习 linear-gradient

LinSan2020年03月16日learning, ,

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

背景透明实现的方法 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.     }

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

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: