【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

目录
相关文章
|
前端开发
如何用CSS实现不规则形状的背景
在设计网页时,有时需要用到不规则形状的背景。这种背景可以为网页带来更加生动的效果。在这篇文章中,我们将探讨如何用CSS实现不规则形状的背景。
1054 0
学习CSS3 中的渐变、阴影与遮罩
CSS3的渐变、阴影和遮罩特性极大地丰富了网页设计。渐变让颜色平滑过渡,赋予页面流动美感;阴影增加元素立体感,引导视觉焦点;遮罩通过隐藏或显示部分元素创造独特视觉效果。这些特性组合使用,可打造丰富多彩、立体生动的视觉体验,并可通过CSS3动画增强动态效果,使网页更具活力。正确应用这些特性需考虑参数调整及跨浏览器兼容性,以确保最佳展示效果。
|
6月前
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(中)
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
160 1
|
6月前
|
前端开发 容器
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(上)
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
143 1
|
6月前
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(下)
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
174 1
|
6月前
|
前端开发
CSS圆角大杀器,使用滤镜构建圆角及波浪效果
CSS圆角大杀器,使用滤镜构建圆角及波浪效果
65 0
|
6月前
|
前端开发 UED
css3背景与渐变
css3背景与渐变
50 0
|
6月前
|
前端开发
使用CSS实现网格+渐变背景色的Web页面背景
使用CSS实现网格+渐变背景色的Web页面背景
78 0
|
12月前
|
前端开发
【前端切图】CSS文字渐变和背景渐变
【前端切图】CSS文字渐变和背景渐变
68 0
|
12月前
|
前端开发
css实现背景半透明文字不透明的效果
css实现背景半透明文字不透明的效果
45 0