纯CSS3实现的几款条纹大背景
本文共 754 字，大约阅读时间需要 2 分钟。
来源 | https://www.jianshu.com/p/6c0be84baf3a
1、实现不等宽背景条纹
实现如上图所示的效果，代码如下：
其他效果：
⑴如果想设置等宽的渐变只需要将开始值和结束值改为互补 ⑵如果需要等宽切无过渡的渐变，开始和结束值设置为50%即可。 ⑶如果想要垂直条纹，你只需要调整background-size的x、y值即可。
2、瓷砖条纹背景
实现如上图所示的效果，代码如下：
瓷砖条纹背景
3、草地背景
实现如上图所示的效果，代码如下：
草地背景
4、斜条纹背景
另一种条纹效果：
实现如上图所示的效果，代码如下：
斜条纹背景
5、单色斜条纹背景（利用透明度及transparent）
实现如上图所示的效果，代码如下：
单色斜条纹背景（利用透明度及transparent）
6、格子衫背景
实现如上图所示的效果，代码如下：
格子衫背景
7、波点背景
实现如上图所示的效果，代码如下：
波点背景
8、棋盘背景
实现如上图所示的效果，代码如下：
棋盘背景
转载地址：http://sufpi.baihongyu.com/
你可能感兴趣的文章
【商城】redis分布式缓存安全应用(穿透问题)
查看>>
【商城】redis大厂实战应用场景(一览众山小)
查看>>
【商城】canal数据库数据实时同步利器
查看>>
【商城】Elasticsearch搜索引擎
查看>>
【商城】Minio+ImgProxy商城图片一站式处理
查看>>
【数据平台】之Cassandra大数据利器
查看>>
【数据平台】之Cassandra大数据利器-代码实战干货I
查看>>
【数据平台】之Kafka+Minio数据埋点大数据利器
查看>>
【数据平台】之Alluxio内存加速大数据利器
查看>>
【数据平台】之Cassandra大数据利器-大规模数据迁移sstableloader
查看>>
【商城】canal数据库数据实时同步利器-代码实战干货
查看>>
【商城】Elasticsearch搜索引擎-01.构建搜索系统之查询-实战
查看>>
【商城】Elasticsearch搜索引擎-02.构建搜索系统客户端-实战
查看>>
【数据平台】Elasticsearch-调优实践
查看>>
【数据平台】Minio-超大文件类断点续传实战
查看>>
RocketMQ-一文读懂架构、源码、调优与面试
查看>>
Kafka-一文读懂架构、源码、调优与面试
查看>>
Hadoop的部署与Minio区别
查看>>
在Alluxio上运行Apache Hive
查看>>
docker常用命令与部署方式
查看>>