CSS3制作酷炫的条纹背景


Posted in HTML / CSS onNovember 09, 2017

1. 实现不等宽背景条纹:

CSS3制作酷炫的条纹背景

.cont{
width: 500px;
height: 200px;
background: linear-gradient(#78C9DB 70%,#0acf00 0%);
background-size: 100%  20px;
}

如果想设置等宽的渐变只需要将开始值和结束值改为互补

如果你需要等宽切无过渡的渐变,开始和结束值设置为50%即可。

如果你想要垂直条纹,你只需要调整background-size的x、y值即可。

2.瓷砖条纹背景

CSS3制作酷炫的条纹背景

.cont{
width:500px;
height:200px;
background:linear-gradient(45deg,#78C9DB 50%,#0acf00 50%);
background-size:30px 30px;
}

3. 草地背景

CSS3制作酷炫的条纹背景

.cont{
width:500px;
height:200px;
background:linear-gradient(-45deg,#0acf00 50%,#78C9DB 50%);
background-size:30px 100%;
}

4. 斜条纹背景

CSS3制作酷炫的条纹背景

.cont{
width:500px;
height:200px;
background:linear-gradient(-45deg,#0acf00 25%,#78C9DB 0,#78C9DB 50%,#0acf00 0,#0acf00 75%,#78C9DB 0);
/*background:repeating-linear-gradient(-45deg,#0acf00,#0acf00 15px,#78C9DB 0,#78C9DB 30px);*/效果相同 
background-size: 30px 30px;
}

5.单色斜条纹背景(利用透明度及transparent)

CSS3制作酷炫的条纹背景

.cont{
width:500px;
height:200px;
background:#fff repeating-linear-gradient(30deg,rgba(0,0,0,.5),rgba(0,0,0,.5)15px,transparent 0,transparent 30px);
}

6. 格子衫背景

CSS3制作酷炫的条纹背景

.cont{
width:500px;
height:200px;
background:#fff;
background: linear-gradient(90deg,rgba(100,0,0,.5) 50%,transparent 0),linear-gradient(rgba(100,0,0,.5) 50%,transparent 0);
background-size: 30px 30px;
}

7.波点背景

CSS3制作酷炫的条纹背景

.cont{
margin:50px;
width:500px;
height:200px;
background:#a95f44;
background-image:radial-gradient(#fff 30%,transparent 0),radial-gradient(#fff 30%,transparent 0);
background-size:20px 20px;
background-position:0 0,10px 10px;  // 必须是background-size尺寸的1/2
}

8.棋盘背景

CSS3制作酷炫的条纹背景

.cont{
width:500px;
height:200px;
background: #fff;
background-image:linear-gradient(45deg,#a95f44  26%,transparent 0,transparent 75%,#a95f44  0),
linear-gradient(45deg,#a95f44  26%,transparent 0,transparent 75%,#a95f44 0);
background-size:30px 30px;
background-position:0 0,15px 15px;
}

总结

以上所述是小编给大家介绍的CSS3制作酷炫的条纹背景,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 #HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 #HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 #HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 #HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 #HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 #HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 #HTML / CSS
You might like
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
python中enumerate的用法实例解析
2014/08/18 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
Python笔记之工厂模式
2019/11/20 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
化工操作工岗位职责
2014/04/29 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
新闻学专业求职信
2014/07/28 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python