mozilla内核浏览器制作background背景渐变

1、制作一个简单的橫条纹渐变背景

-mozilla内核的浏览器css样式:

CSS Code复制内容到剪贴板
  1. body {   
  2.  background-color: #aaa;   
  3.  background-image:-moz-linear-gradient(#000 25%,#fc0 80%);   
  4.  background-size: 50px 50px;   
  5. }  

以火狐为代表,显示效果如下:
CSS3条纹背景制作的实战攻略

改变background-size的值可以控制背景条纹的高度。上例中-moz-linear-gradient的值分为两组,开始值和结束值,同时设定的开始值的开始位置和结束值的结束位置,位置相差的部分形成渐变。开始位置之前的部分填充为开始的颜色值,结束值之后的部分填充为结束的颜色值。

2、改变条纹的方向

CSS Code复制内容到剪贴板
  1. body {   
  2.  background-image:-moz-linear-gradient(0deg,#000 25%,#fc0 80%);   
  3. }  

在上面的样式中添加了一组参数<角度位置>,参数分别为0deg-360deg,当这为0deg时,为竖条纹,度数增加时,以逆时针方向转动。下图为它分别为0deg和45deg时效果图:
CSS3条纹背景制作的实战攻略

CSS3条纹背景制作的实战攻略

3、我们尝试着多加几种颜色渐变

CSS Code复制内容到剪贴板
  1. body {   
  2.  background-image:-moz-linear-gradient(45deg,#000 25%,transparent 25%,#fc0 80%);   
  3. }  

大家看到,在原来的代码里面我添加了一种透明颜色(transparent 25%),这种渐变的位置和前面一种渐变的位置相重合,它发生了什么样的事情?
CSS3条纹背景制作的实战攻略

从上图中大家可以清晰的看到,第一种颜色嘎然而止。那我们再试着多添加几种这样的颜色,会出现什么样的效果?写到这里我打算把里面的角度先调成0deg,这样看起来会更清楚。

CSS Code复制内容到剪贴板
  1. body {   
  2.  background-image:-moz-linear-gradient(0deg,#000 25%,transparent 25%,transparent 50%,#fc0 50%,#f00 75%,transparent 75%);   
  3. }  

猜猜看,效果图会是什么样子的?
CSS3条纹背景制作的实战攻略

在这里大家一定要注意一个问题,这里面写了background-size:50px,50px;那么,它可以被分成重复的块,每个块是50px*50px,注意每个块的起始位置和结束位置。

4、斜纹背景的雏形

现在大家再把原来的0deg,改成45deg,会变成什么样子的呢?
CSS3条纹背景制作的实战攻略

大家应该可以看出来这已经是斜纹背景了吧。再修改一下:

CSS Code复制内容到剪贴板
  1. body {   
  2.     background-image:-moz-linear-gradient(45deg,#000 25%,transparent 25%,transparent 50%,#000 50%,#000 75%,transparent 75%);   
  3.     background-size:16px 16px;   
  4. }  

大家看到了什么,有没有得到令你满意的效果,修改颜色值,来达到你的目的。这里面还有一个问题,大家自己思考下吧,background-size的值需要注意什么?
CSS3条纹背景制作的实战攻略

5、最终效果

虽然上面的斜纹背景已经出来了,但还没有达到我们想要的最终效果。我们再把里面的颜色值修改一下,换成白色。现在的颜色值为#fff,我们把它换成rgba形式为rgba(255,255,255,1),前面的三个数字为rgb,第四个数字为alpha,现在我们把这个alpha改成半透明的,代码如下:

CSS Code复制内容到剪贴板
  1. body {   
  2.     background-color: #eee;   
  3.     background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);   
  4.     background-size: 16px 16px;   
  5. }  

webkit内核
 1、制作一个简单的竖条纹背景

css如下, 这里的效果图可以与上面火狐版的对应起来看

CSS Code复制内容到剪贴板

  1. body {   
  2.     background-color: #eee;   
  3.     background-image:-webkit-gradient(linear,0 0,100% 0,from(#fff),to(#000));   
  4.     background-size: 80px 80px;   
  5. }  

 2、改变条纹的方向,

CSS Code复制内容到剪贴板
  1. body {   
  2.     background-image:-webkit-gradient(linear,0 100%,100% 0,from(#fff),to(#000));   
  3. }  

 3、添加丰富的颜色渐变

CSS Code复制内容到剪贴板
  1. body {   
  2.     background-image:-webkit-gradient(linear,0 0,100% 0,from(#fff),to(#000),color-stop(25%,#fc0),color-stop(50%,#0fc),color-stop(75%,#f0c))   
  3. }  

 4、调整颜色,并添加透明色。


复制代码代码如下:background-image:-webkit-gradient(linear,0 0,100% 0,color-stop(25%,#0fc),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,#fc0),color-stop(75%,#f0c),color-stop(75%,transparent));
 5、按第2步来调整方向


复制代码代码如下:background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,#0fc),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,#fc0),color-stop(75%,#f0c),color-stop(75%,transparent));
  6、调整颜色,调整background-size大小

CSS Code复制内容到剪贴板
  1. body {   
  2.     background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,#000),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,#000),color-stop(75%,#000),color-stop(75%,transparent));   
  3.     background-size: 16px 16px;   
  4. }  

CSS3条纹背景制作的实战攻略

7、调整颜色值的透明度,最终效果如下:

虽然上面的斜纹背景已经出来了,但还没有达到我们想要的最终效果。我们再把里面的颜色值修改一下,换成白色。现在的颜色值为#fff,我们再把它换成rgba形式为rgba(255,255,255,1),前面的三个数字为rgb,第四个数字为alpha,现在我们把这个alpha改成半透明的,最终代码如下:

CSS Code复制内容到剪贴板
  1. body {   
  2.     background-color: #eee;   
  3.     background-image: -moz-linear-gradient(45deg,#fff 25%, transparent 25%, transparent 50%,#fff 50%,#fff 75%, transparent 75%, transparent);   
  4.     background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,rgba(255,255,255,0.2)),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,rgba(255,255,255,0.2)),color-stop(75%,rgba(255,255,255,0.2)),color-stop(75%,transparent));   
  5.     background-size: 16px 16px;   
  6. }  

上面的代码加上了上面讲的mozilla内核浏览器下的写法,在火狐、谷歌浏览器中测试显示正常。
CSS3条纹背景制作的实战攻略

广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。