它利用 box-shadow 和 border 的特性在伪元素上绘制出整齐的砖块网格,呈现出一种红砖墙的质感。
🧱复古墙砖背景代码
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -520;
pointer-events: none;
/* 设置砖块颜色 (深红色) */
background-color: #962e2e;
/* 使用 box-shadow 模拟砖块缝隙 */
/* 通过重复的阴影创建网格线 */
box-shadow:
/* 垂直线: 每 40px 画一条深色线 (模拟竖缝) */
inset 40px 0 0 -37px #660000,
inset 80px 0 0 -77px #660000,
inset 120px 0 0 -117px #660000,
/* 水平线: 每 20px 画一条深色线 (模拟横缝) */
inset 0 20px 0 -17px #660000,
inset 0 40px 0 -37px #660000,
inset 0 60px 0 -57px #660000;
/* 如果需要错位效果 (标准砖墙砌法),可以取消注释下面这行 */
/* transform: translateX(-20px); */
}
🎨 变体:水泥墙/混凝土
如果你想要的是平滑的水泥墙而不是红砖,可以使用噪点纹理:
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -520;
pointer-events: none;
/* 水泥灰 */
background: #999;
/* 添加噪点,模拟水泥颗粒感 */
opacity: 0.1; /* 让它变淡,作为底纹 */
}
/* 水泥噪点纹理 (通过多重背景模拟) */
body::before {
background-image:
/* 较大的斑点 */
radial-gradient(circle, rgba(255,255,255,0.2) 1px, transparent 1px),
/* 较小的颗粒 */
radial-gradient(circle, rgba(0,0,0,0.1) 1px, transparent 1px);
background-size: 20px 20px, 10px 10px;
background-position: 0 0, 5px 5px;
}
本文著作权归作者 [ 念 ] 享有,未经作者书面授权,禁止转载,封面图片来源于 [ 互联网 ] ,本文仅供个人学习、研究和欣赏使用。如有异议,请联系博主及时处理。