• 首页
  • 归档
  • 邻居
  • 搜索
  • 夜间模式
    ©2025-2026  Fnian Theme by OneBlog
    搜索
    标签
    # 新生 # 取名 # 咿咿呀呀 # 年度总结 # 流感 # 感冒 # 背景 # 时光
  • 首页>
  • 片段诗行>
  • 正文
  • “复古墙砖”背景

    2026年02月01日 83 阅读 0 评论 1705 字

    它利用 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;
    }
    本文著作权归作者 [ 念 ] 享有,未经作者书面授权,禁止转载,封面图片来源于 [ 互联网 ] ,本文仅供个人学习、研究和欣赏使用。如有异议,请联系博主及时处理。
    背景
    — END —
    首页归档邻居
    Copyright©2025-2026  All Rights Reserved.  Load:0.011 s
    Theme by OneBlog V3.6.5

    开源不易,请尊重作者版权,保留基本的版权信息。