当前位置: 萬仟网 > IT编程>网页制作>CSS > CSS3制作酷炫的条纹背景

CSS3制作酷炫的条纹背景

2017年11月17日 09:19  | 萬仟网IT编程  | 我要评论

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

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

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

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

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

2.瓷砖条纹背景

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

3. 草地背景

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

4. 斜条纹背景

.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)

.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. 格子衫背景

.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.波点背景

.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.棋盘背景

.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制作酷炫的条纹背景,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对萬仟网网站的支持!

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

  • Web前端——Html常用标签及属性

    html 常用的标题等标签就不记录了,只记录一下比较少见的标签以及属性 表格 table td 单元格 tr 表的行 th 表头 td或th可以下面... [阅读全文]
  • 如何成为一名优秀的web前端工程师

    如何成为一名优秀的web前端工程师

    何为:前端工程师? 前端工程师,也叫Web前端开发工程师。他是随着web发展,细分出来的行业。 Web前端开发技术主要包括三个要素:HTML、CSS... [阅读全文]
  • <img>标签--基础标签

    [2019.06.22 学习笔记1] 1.<img>图片标签,自闭合标签 2.必要属性src,src="图片地址" ... [阅读全文]
  • DTD文档模型是什么

    [2019.06.22 学习笔记3] 1.DTD文档模型是DOCTYPE文档声明,是Doucument Type Definition的英文缩写,是... [阅读全文]
  • Web前端——css

    Web前端——css

    css 推荐的样式编写顺序: 1. Positioning:定位 2. Box model:盒子模型、大小等 3. Typographic:文字系列... [阅读全文]
  • 博客园美化主题需要这几步

    博客园美化主题需要这几步

    博客园美化主题需要这几步 本人现用的这套博皮是根据bndong的博客进行修改的,且配置需要时间,有兴趣可以直接访问bndong博客,查看置顶博文进行... [阅读全文]
  • iconfont采坑

    iconfont采坑

    1. iconfont采坑 1.1. 前言 1. 使用iconfont过程中踩过坑特此记录 2. 不知道iconfont的这里也简单介绍一笔,阿里开... [阅读全文]
  • css网页布局模板

    效果如图: 菜鸟教程(runoob.com) 我的网页 重置浏览器大小查看效果。 我的网页 重置浏览器大小查看效果。 链接 链接 链接 链接 文章标... [阅读全文]
  • css基础4

    今天是2019年6月21日,周五了。在这里写上一篇随笔,主要内容是css基础中的一些细节部分,话不多说,直接上! 一、背景渐变: backgroun... [阅读全文]
  • CSS filter 属性

    CSS filter 属性

    filter 将模糊或者颜色偏移等图像效果用于元素,通常用于调整图像,背景和边框的渲染 css 标准中已内置一些预定义效果的函数,也可通过url使用... [阅读全文]

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com