1、实现不等宽背景条纹

实现如上图所示的效果，代码如下：

条纹背景

其他效果：

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

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

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

2、瓷砖条纹背景

实现如上图所示的效果，代码如下：

瓷砖条纹背景

3、草地背景

实现如上图所示的效果，代码如下：

草地背景

4、斜条纹背景

实现如上图所示的效果，代码如下：

斜条纹背景

另一种条纹效果：

实现如上图所示的效果，代码如下：

斜条纹背景

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

实现如上图所示的效果，代码如下：

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

6、格子衫背景

实现如上图所示的效果，代码如下：

格子衫背景

7、波点背景

实现如上图所示的效果，代码如下：

波点背景

8、棋盘背景

实现如上图所示的效果，代码如下：

棋盘背景

点击【右上角，关注 子瑜说IT 】持续更新IT资讯以及web前端开发教学

8年开发老码农福利赠送：网页制作，网站开发，web前端开发，从最零基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端小程序项目实战【视频＋工具＋系统路线图】都有整理，送给每一位对编程感兴趣的小伙伴

获取方式：

右上角有私信，请私信发我：01 即可获取！

如果觉得《ios 渐变透明背景_CSS3做出条纹大背景》对你有帮助，请点赞、收藏，并留下你的观点哦！