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


Posted in HTML / CSS onMay 31, 2016

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

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

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

CSS Code复制内容到剪贴板
  1. body {   
  2.  background-color#aaa;   
  3.  background-image:-moz-linear-gradient(#000 25%,#fc0 80%);   
  4.  background-size50px 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-size16px 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-size80px 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-size16px 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-size16px 16px;   
  6. }  

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

HTML / CSS 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
详解CSS中iconfont的使用
Aug 04 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
CSS3 制作精美的定价表
Apr 06 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
HTTP中的Content-type详解
Jan 18 HTML / CSS
CSS3实现多重边框的方法总结
May 31 #HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 #HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 #HTML / CSS
CSS中的字体大小设置属性总结
May 24 #HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 #HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 #HTML / CSS
CSS3中的Media Queries学习笔记
May 23 #HTML / CSS
You might like
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
php遍历类中包含的所有元素的方法
2015/05/12 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
python实现简单遗传算法
2018/03/19 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
你应该知道的30个css选择器
2014/03/19 HTML / CSS
神路信息Java面试题目
2013/03/31 面试题
护士的岗位职责
2013/12/04 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
表彰大会策划方案
2014/05/13 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
安全第一课观后感
2015/06/18 职场文书
初三语文教学反思
2016/03/03 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
python中print格式化输出的问题
2021/04/16 Python