css网格背景

利用background-image里的liner-gradient属性可以实现一些简单的css网格背景,能自适应背景,挺实用的,下面就简单的介绍两款网格背景
1.桌布花纹

红.png

代码块

height:300px;
width:300px;
background:white;
background-image:linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
background-size:30px 30px;

2.蓝图网格

蓝色.png

代码块

 height: 300px;
            width: 300px;
            background:#58a;
            background-image: linear-gradient(white 2px,transparent 0),
                linear-gradient(90deg, white 2px,transparent 0),
               linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
                linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0);
            background-size:75px 75px,75px 75px,15px 15px,15px 15px;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容