小小世界 小小世界
小小世界

“复古墙砖”背景

它利用 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;
}

暂无评论

还没有评论,来说点什么吧

评论已关闭

© 2025 - 2026