CSS 透明网格背景

原文链接

写在前面

我们知道,无论是 Adobe 还是其他图形编辑器,都会使用灰白相间的网格背景来表达透明。比如这样:

用 CSS 如何实现呢?

  • 使用 background-image + background-size + background-repeat 组合,如果想要图片不失真,可使用四个网格 SVG 图片重复。
  • 如果不想用图片的话,可以使用 background-image + linear-gradient,设置多个 linear-gradient 然后进行一定的错位,使其形成格子状。

第一种方式缺点是不便调整大小、颜色。下文就第二种方式展开介绍。

实现

提前知道:

  • background-image 可以设置一张或多张图片,前面的图片会挡住后面的图片。
  • background-position 可以指定一张或多张图片的位置,background-size 等同理。

先定义一个渐变:

css 复制代码
.grid {
  background-image: linear-gradient(45deg, red 25%, green 25%, green 75%, red 75%);
  background-repeat: no-repeat;
  background-size: 50px 50px;
}

为什么是 45°、25%、75%?

为了让绿色部分占格子宽度一半。就是一个格子分成了三部分红色、绿色、红色,它们所占比例分别是 1:2:1。当旋转 45° 之后,在对角线看也是这个比例,也是为了后面的堆叠。

接着,再定义多一个相同的渐变,并移动第二个渐变的位置,移动距离为背景图片大小的一半。

css 复制代码
.grid {
  background-image: linear-gradient(
      45deg,
      rgba(255, 0, 0, 0.5) 25%,
      rgba(0, 255, 0, 0.5) 25%,
      rgba(0, 255, 0, 0.5) 75%,
      rgba(255, 0, 0, 0.5) 75%
    ),
    linear-gradient(
      45deg,
      rgba(255, 0, 0, 0.5) 25%,
      rgba(0, 255, 0, 0.5) 25%,
      rgba(0, 255, 0, 0.5) 75%,
      rgba(255, 0, 0, 0.5) 75%
    );
  background-repeat: no-repeat;
  background-position: 0 0, 25px 25px;
  background-size: 50px 50px;
}

为方便查看堆叠效果,添加了透明度。

到这里,是不是可以想象得到正方形格子的形状了,接着我们改成 background-repeat: repeat 再看看 👇

观察上图,只要把绿色部分改成透明,红色部分改成灰色,就是灰白相间的网格效果。但改成透明的话,如果本身底部是含有背景的,显示就有问题了,因此背景颜色要改成白色。

css 复制代码
.grid {
  background-color: #fff;
  background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
  background-position: 0 0, 25px 25px;
  background-size: 50px 50px;
}

如格子大小、颜色可按需调整。其中白色格子调整 background-color、灰色格子调整 background-image 中的 #eee 颜色值。目前每个格子大小是 25px,如调整大小,需同时修改 background-position,它始终是 background-size 的一半。

另外,MDN 提供了另外一种做法(Checkerboard),可是兼容性一般。

The end.

相关推荐
吕彬-前端17 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱19 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai29 分钟前
uniapp
前端·javascript·vue.js·uni-app
bysking1 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205872 小时前
web端手机录音
前端
齐 飞2 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb