前几天搞了个问卷调查,是教育局工作,但是领导的任务清单很散乱,所以我做了个网页,方便宣传的开展。就是这个网页,两天浏览量破6000,说明大家还是很配合的,这才让我想到手机浏览此站的体验。用iphonese和xiaomi6都进行了测试,发现很多地方显示不佳,就花了个把小时优化了手机显示,顺便改良了菜单背景。
背景透明实现的方法 css: opacity 实例解说
我们可以用 div{opacity:0.5;} 来控制元素的不透明级别,所有浏览器都支持 opacity 属性,注意:IE8 以及更早的版本支持替代的 filter 属性。例如:filter:Alpha(opacity=50)。为了提高兼容性,通常这么写:
- background-color:red;
- opacity:0.5;
- 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+。
怎么实现透明度和背景渐变同时叠加呢?
使用下面这段代码就可以了,具体效果自己改动了调试吧
- background-image: linear-gradient(
- to rightright,
- rgba(0,0,0,0) 0%,
- rgba(0,0,0,0.4) 5%,
- rgba(0,0,0,0.6) 10%,
- rgba(0,0,0,0.6) 90%,
- rgba(0,0,0,0.4) 95%,
- rgba(0,0,0,0) 100%);
另外,方框和横线都可以实现颜色渐变:
- # CSS
- li.active {
- color: #C66214;
- background-origin: padding-box,border-box;
- background-image: linear-gradient(135deg,#FFFFFF,#FFFFFF),linear-gradient(-90deg, #FFBA33 0%, #B3450A 100%);
- border-bottom: .04rem solid;
- border-image: linear-gradient(-90deg, #FFBA33, #B3450A);
- }
好了,笔记就做到这里吧。
发表评论