容器纹理背景样式记录
作者: iTxGo |
发布于: 2026-02-26 16:38 |
更新于: 2026-02-28 07:20 |
分类: 笔记 |
浏览: 38 |
1. 粗糙纸张纹理背景
/* ==========================================
卡片容器粗糙纸张纹理背景
========================================== */
.header-container::before,
.footer-container::before,
.sidebar-container::before,
.article-container::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: var(--radius-lg);
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23grain)' opacity='1'/%3E%3C/svg%3E");
background-size: 200px 200px;
background-repeat: repeat;
}
2. 网格线纹理背景
/* ==========================================
卡片容器网格线纹理背景
========================================== */
.header-container::before,
.footer-container::before,
.sidebar-container::before,
.article-container::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: var(--radius-lg);
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.1;
background:
repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.1) 2px,
rgba(0, 0, 0, 0.1) 4px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.1) 2px,
rgba(0, 0, 0, 0.1) 4px
),
repeating-radial-gradient(circle at 30% 40%, rgba(0,0,0,0.02) 0px, transparent 2px);
background-size: auto, auto, 4px 4px;
filter: contrast(1.2) brightness(0.9);
}
3. 六边形纹理背景
/* ==========================================
卡片容器六边形纹理背景
========================================== */
.header-container::before,
.footer-container::before,
.sidebar-container::before,
.article-container::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: var(--radius-lg);
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.3;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg' width='60' height='34.64'%3E%3Cg stroke='%23000' stroke-width='1.1' stroke-opacity='0.1'%3E%3Cline x1='30.0' y1='34.64' x2='10.0' y2='34.64'%2F%3E%3Cline x1='10.0' y1='34.64' x2='0.0' y2='17.32'%2F%3E%3Cline x1='0.0' y1='17.32' x2='10.0' y2='0.0'%2F%3E%3Cline x1='10.0' y1='0.0' x2='30.0' y2='0.0'%2F%3E%3Cline x1='70.0' y1='0.0' x2='60.0' y2='17.32'%2F%3E%3Cline x1='60.0' y1='17.32' x2='40.0' y2='17.32'%2F%3E%3Cline x1='40.0' y1='17.32' x2='30.0' y2='0.0'%2F%3E%3Cline x1='30.0' y1='34.64' x2='40.0' y2='17.32'%2F%3E%3Cline x1='60.0' y1='17.32' x2='70.0' y2='34.64'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-size: 60px 34.64px;
background-repeat: repeat;
}
4. 经典点阵背景
/* ==========================================
卡片容器经典点阵背景
========================================== */
.header-container::before,
.footer-container::before,
.sidebar-container::before,
.article-container::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='%23000000' fill-opacity='1'/%3E%3C/svg%3E");
background-size: 20px 20px;
}
5. 立体六边形纹理背景 - 横
/* ==========================================
卡片容器立体六边形背景 - 横
========================================== */
.header-container::before,
.footer-container::before,
.sidebar-container::before,
.article-container::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.02;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='49' height='28' viewBox='0 0 49 28'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='1' fill-rule='nonzero'%3E%3Cpath d='M9.25 14.01L16.75 1.01L31.75 1.01L39.25 14.01L31.75 27L16.75 27Z M17.9 25L30.6 25L36.94 14.01L30.59 3.01L17.9 3.01L11.56 14.01Z M15 28L7.5 15.02L0 15.02L0 17.02L6.35 17.02L12.69 28Z M33.5 28L41 15.02L49 15.02L49 17.02L42.15 17.02L35.81 28Z M0 13L7.5 13L15 0.01L15 0L12.69 0L12.69 0.01L6.35 11L0 11Z M49 13L41 13L33.5 0.01L33.5 0L35.81 0L35.81 0.01L42.15 11L49 11Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-size: 49px 28px;
}
6. 立体六边形纹理背景 - 竖
/* ==========================================
卡片容器立体六边形背景 - 竖
========================================== */
.header-container::before,
.footer-container::before,
.sidebar-container::before,
.article-container::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.02;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='1' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-size: 28px 49px;
}
7. 波浪线条纹理背景
/* ==========================================
卡片容器波浪线条背景
========================================== */
.header-container::before,
.footer-container::before,
.sidebar-container::before,
.article-container::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 40 Q 10 30 20 40 T 40 40' stroke='%23000000' stroke-width='1' fill='none'/%3E%3Cpath d='M0 30 Q 10 20 20 30 T 40 30' stroke='%23000000' stroke-width='1' fill='none'/%3E%3Cpath d='M0 20 Q 10 10 20 20 T 40 20' stroke='%23000000' stroke-width='1' fill='none'/%3E%3Cpath d='M0 10 Q 10 0 20 10 T 40 10' stroke='%23000000' stroke-width='1' fill='none'/%3E%3C/svg%3E");
background-size: 40px 40px;
}
8. 斜纹线条纹理背景
/* ==========================================
卡片容器斜纹线条背景
========================================== */
.header-container::before,
.footer-container::before,
.sidebar-container::before,
.article-container::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.02;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M-1 1l2-2M0 10l10-10M9 11l2-2' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
background-size: 10px 10px;
}
9. 四角星纹理背景
/* ==========================================
卡片容器四角星背景
========================================== */
.header-container::before,
.footer-container::before,
.sidebar-container::before,
.article-container::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.02;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M12 0L14.5 9.5L24 12L14.5 14.5L12 24L9.5 14.5L0 12L9.5 9.5L12 0Z'/%3E%3C/svg%3E");
background-size: 24px 24px;
background-repeat: repeat;
}
10. 砖块纹理背景
/* ==========================================
卡片容器砖块背景
========================================== */
.header-container::before,
.footer-container::before,
.sidebar-container::before,
.article-container::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.2;
/* 模拟砖缝 */
background-image:
linear-gradient(335deg, rgba(0,0,0,0.2) 23px, transparent 23px),
linear-gradient(155deg, rgba(0,0,0,0.2) 23px, transparent 23px),
linear-gradient(335deg, rgba(0,0,0,0.2) 23px, transparent 23px),
linear-gradient(155deg, rgba(0,0,0,0.2) 23px, transparent 23px);
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}
11. 交叉斜线纹理背景
/* ==========================================
卡片容器交叉斜线背景
========================================== */
.header-container::before,
.footer-container::before,
.sidebar-container::before,
.article-container::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 0l8 8M8 0L0 8' stroke='%23000' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
background-size: 8px 8px;
}
12. 方块纹理背景
/* ==========================================
卡片容器方块纹理背景
========================================== */
.header-container::before,
.footer-container::before,
.sidebar-container::before,
.article-container::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.02;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='0' y='0' width='8' height='8' fill='%23000000' fill-opacity='1'/%3E%3Crect x='10' y='10' width='8' height='8' fill='%23000000' fill-opacity='1'/%3E%3C/svg%3E");
background-size: 20px 20px;
}
13. 折线纹理背景
/* ==========================================
卡片容器折线背景
========================================== */
.header-container::before,
.footer-container::before,
.sidebar-container::before,
.article-container::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0 10 L10 0 L20 10' stroke='%23000000' stroke-width='1' fill='none'/%3E%3Cpath d='M0 20 L10 10 L20 20' stroke='%23000000' stroke-width='1' fill='none' opacity='0.5'/%3E%3C/svg%3E");
background-size: 20px 20px;
}
14. 点状纹理背景
/* ==========================================
卡片容器点状背景
========================================== */
.header-container::before,
.footer-container::before,
.sidebar-container::before,
.article-container::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M1 1h1v2H1z' fill='%23000000' fill-opacity='1'/%3E%3C/svg%3E");
background-size: 4px 4px;
}