1、实现不等宽背景条纹
![82d02d04d03f43a935b499f467817487.png](https://i-blog.csdnimg.cn/blog_migrate/5a3807ac679273f9098e14a39a3d6b78.jpeg)
实现如上图所示的效果,代码如下:
条纹背景
其他效果:
⑴如果想设置等宽的渐变只需要将开始值和结束值改为互补
⑵如果需要等宽切无过渡的渐变,开始和结束值设置为50%即可。
⑶如果想要垂直条纹,你只需要调整background-size的x、y值即可。
2、瓷砖条纹背景
![62b5b1c56588fed0b6e39ec503a75199.png](https://i-blog.csdnimg.cn/blog_migrate/5b22c4e818ee0866b14eafd57da6fdcf.jpeg)
实现如上图所示的效果,代码如下:
瓷砖条纹背景
3、草地背景
![c0028593b2b3927763373ce9a97b8b79.png](https://i-blog.csdnimg.cn/blog_migrate/0302195926b4c6582d55f444a19aae84.jpeg)
实现如上图所示的效果,代码如下:
草地背景
4、斜条纹背景
![3b273a443859bc011d6cdb41f501dd09.png](https://i-blog.csdnimg.cn/blog_migrate/a592e8e9a86a1ffa948c6727f5412c08.jpeg)
实现如上图所示的效果,代码如下:
斜条纹背景
另一种条纹效果:
![815cc69872dd0fcdddb7c74329702b82.png](https://i-blog.csdnimg.cn/blog_migrate/e38ea84eedd8a44c08cc9b3cdee2c8a2.jpeg)
实现如上图所示的效果,代码如下:
斜条纹背景
5、单色斜条纹背景(利用透明度及transparent)
![e6263960f3c9af6c61c54e9d0afa7f54.png](https://i-blog.csdnimg.cn/blog_migrate/f1063731524e61f7c7d8187a97e98a2f.jpeg)
实现如上图所示的效果,代码如下:
单色斜条纹背景(利用透明度及transparent)
6、格子衫背景
![1a0e33c32b6a9eefdcea6efa2d9ce2d2.png](https://i-blog.csdnimg.cn/blog_migrate/4ec72d3ec069c8f996e29904abe46a0b.jpeg)
实现如上图所示的效果,代码如下:
格子衫背景
7、波点背景
![cb0df98b7659a49b1eabf159de803d6c.png](https://i-blog.csdnimg.cn/blog_migrate/883428f43f68deb5bad343ebd2573cf5.jpeg)
实现如上图所示的效果,代码如下:
波点背景
8、棋盘背景
![4a16b90aee82cadcc38749a4d3cc2596.png](https://i-blog.csdnimg.cn/blog_migrate/5dd1bbb161a5835144f03d87aede5abd.jpeg)
实现如上图所示的效果,代码如下:
棋盘背景
点击【右上角,关注 子瑜说IT 】持续更新IT资讯以及web前端开发教学
8年开发老码农福利赠送:网页制作,网站开发,web前端开发,从最零基础开始的的HTML+CSS+JavaScript。jQuery,Ajax,node,angular框架等到移动端小程序项目实战【视频+工具+系统路线图】都有整理,送给每一位对编程感兴趣的小伙伴
获取方式:
右上角有私信,请私信发我:01 即可获取!
![79c0e57728d7d4b1d1eb42e2ac060dfb.png](https://i-blog.csdnimg.cn/blog_migrate/3e31589b13b022b931cd005617e8bd5b.jpeg)