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 相关文章推荐
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 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
人大复印资料处理程序_补充篇
2006/10/09 PHP
自己前几天写的无限分类类
2007/02/14 PHP
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
让python在hadoop上跑起来
2016/01/27 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
python实现自动化上线脚本的示例
2019/07/01 Python
python多线程并发及测试框架案例
2019/10/15 Python
Python内存映射文件读写方式
2020/04/24 Python
解决python对齐错误的方法
2020/07/16 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
PHP如何自定义函数
2016/09/16 面试题
2019年Java 最常见的 面试题
2016/10/19 面试题
怎么样写好简历中的自我评价
2013/10/25 职场文书
党员年终民主评议的自我评价
2013/11/05 职场文书
优秀企业获奖感言
2014/02/01 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
80后婚前协议书范本
2014/10/24 职场文书
消防安全月活动总结
2015/05/08 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫