【CSS】三行实现一个黑白网格背景(渐变)

简介: 【CSS】三行实现一个黑白网格背景(渐变)

image.png

最近还在学习前端,看见VScode调色板里的背景是这种黑白格,我就试着用CSS复刻一下。

代码就是三行,可以通过调节sizeposition来改变格子大小:


body {
    background: linear-gradient(
                    45deg, 
                    rgba(0, 0, 0, 0.4) 25%, 
                    transparent 25%, 
                    transparent 75%, 
                    rgba(0, 0, 0, 0.4) 75%, 
                    rgba(0, 0, 0, 0.4)
                ),
                linear-gradient(
                    45deg, 
                    rgba(0, 0, 0, 0.4) 25%, 
                    transparent 25%, 
                    transparent 75%, 
                    rgba(0, 0, 0, 0.4) 75%, 
                    rgba(0, 0, 0, 0.4)
                );
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
}
复制代码


实现效果如下:


image.png

目录
相关文章
|
前端开发 JavaScript
【经典】全局公共scss文件的引入使用
【经典】全局公共scss文件的引入使用
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
416 0
|
SQL 算法 Java
Mybatis-plus超详细讲解(2022)
MyBatis-Plus(简称 MP)是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开发、提高效率而生。 我们的愿景是成为 MyBatis 最好的搭档,就像 魂斗罗 中的 1P、2P,基友搭配,效率翻倍。
4222 1
|
前端开发 JavaScript
elementUI使用Pagination分页组件增加自定义slot
本文介绍了如何在Element UI的Pagination分页组件中使用自定义slot。通过在`el-pagination`标签内的适当位置添加slot内容,可以在分页组件中插入自定义的HTML或组件。文章提供了一个示例代码,展示了如何添加两个自定义slot,并展示了最终效果。
1480 4
elementUI使用Pagination分页组件增加自定义slot
|
存储 缓存 安全
如何备份WordPress?
【6月更文挑战第6天】如何备份WordPress?
165 1
|
监控 JavaScript 前端开发
Vue3组合式函数(监听DOM尺寸 useResizeObserver)
本文介绍如何使用 `ResizeObserver` API 编写 Vue3 的通用组合式函数 `useResizeObserver`,该函数可方便地观察一个或多个元素的尺寸变化,并执行指定回调。`ResizeObserver` 接口用于监控 `Element` 或 `SVGElement` 的尺寸变化,避免了无限回调循环问题。
918 0
Vue3组合式函数(监听DOM尺寸 useResizeObserver)
|
存储 Web App开发 JSON
存储界的cookie、本地存储、会话存储
存储界的cookie、本地存储、会话存储
439 1
|
缓存 JavaScript 前端开发
三分钟,带你学会 Vue3 加载远程组件
三分钟,带你学会 Vue3 加载远程组件
|
SQL Java 关系型数据库
实时数仓 Hologres产品使用合集之如何安装和使用Java SDK
实时数仓Hologres是阿里云推出的一款高性能、实时分析的数据库服务,专为大数据分析和复杂查询场景设计。使用Hologres,企业能够打破传统数据仓库的延迟瓶颈,实现数据到决策的无缝衔接,加速业务创新和响应速度。以下是Hologres产品的一些典型使用场景合集。