<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 背景图案演示</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
padding: 40px 20px;
background: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
text-align: center;
margin-bottom: 40px;
color: #333;
font-size: 2.5em;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.pattern-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.pattern-card:hover {
transform: translateY(-5px);
}
.pattern-preview {
height: 200px;
position: relative;
}
.pattern-info {
padding: 20px;
}
.pattern-info h3 {
margin-bottom: 10px;
color: #333;
font-size: 1.3em;
}
.pattern-info p {
color: #666;
font-size: 0.9em;
line-height: 1.5;
}
/* 菱形网格 */
.diamond {
background:
linear-gradient(45deg, transparent 49%, rgba(100, 100, 100, 0.95) 49% 51%, transparent 51%),
linear-gradient(-45deg, transparent 49%, rgba(100, 100, 100, 0.95) 49% 51%, transparent 51%);
background-color: #fffcf8;
background-size: 3em 3em;
}
/* 点阵图案 */
.dots {
background:
radial-gradient(circle, rgba(100, 100, 100, 0.8) 1px, transparent 1px);
background-color: #fffcf8;
background-size: 20px 20px;
}
/* 方格网格 */
.grid-pattern {
background:
linear-gradient(rgba(100, 100, 100, 0.5) 1px, transparent 1px),
linear-gradient(90deg, rgba(100, 100, 100, 0.5) 1px, transparent 1px);
background-color: #fffcf8;
background-size: 20px 20px;
}
/* 斜线条纹 */
.diagonal-stripes {
background:
repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(100, 100, 100, 0.5) 10px,
rgba(100, 100, 100, 0.5) 20px
);
background-color: #fffcf8;
}
/* 波浪纹 */
.waves {
background:
radial-gradient(ellipse at 50% 100%, transparent 40%, rgba(100, 100, 100, 0.3) 41%);
background-color: #fffcf8;
background-size: 80px 40px;
}
/* 六边形 */
.hexagons {
background:
radial-gradient(circle farthest-side at 0% 50%, rgba(100, 100, 100, 0.5) 23.5%, transparent 0) 21px 30px,
radial-gradient(circle farthest-side at 0% 50%, rgba(100, 100, 100, 0.3) 24%, transparent 0) 19px 30px;
background-color: #fffcf8;
background-size: 40px 60px;
}
/* 交叉线 */
.cross-hatch {
background:
linear-gradient(45deg, transparent 48%, rgba(100, 100, 100, 0.4) 49%, rgba(100, 100, 100, 0.4) 51%, transparent 52%),
linear-gradient(-45deg, transparent 48%, rgba(100, 100, 100, 0.4) 49%, rgba(100, 100, 100, 0.4) 51%, transparent 52%);
background-color: #fffcf8;
background-size: 40px 40px;
}
/* 圆形图案 */
.circles {
background:
radial-gradient(circle, transparent 20%, rgba(100, 100, 100, 0.3) 20%, rgba(100, 100, 100, 0.3) 80%, transparent 80%);
background-color: #fffcf8;
background-size: 50px 50px;
}
/* 附加图案：鱼鳞纹 */
.scales {
background:
radial-gradient(circle at 100% 50%, transparent 40%, rgba(100, 100, 100, 0.3) 41%, rgba(100, 100, 100, 0.3) 49%, transparent 50%),
radial-gradient(circle at 0% 50%, transparent 40%, rgba(100, 100, 100, 0.3) 41%, rgba(100, 100, 100, 0.3) 49%, transparent 50%);
background-color: #fffcf8;
background-size: 40px 40px;
background-position: 0 0, 20px 20px;
}
/* 棋盘格 */
.checkerboard {
background:
linear-gradient(45deg, rgba(100, 100, 100, 0.25) 25%, transparent 25%),
linear-gradient(-45deg, rgba(100, 100, 100, 0.25) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(100, 100, 100, 0.25) 75%),
linear-gradient(-45deg, transparent 75%, rgba(100, 100, 100, 0.25) 75%);
background-color: #fffcf8;
background-size: 40px 40px;
background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
}
/* 三角形 */
.triangles {
background:
linear-gradient(135deg, rgba(100, 100, 100, 0.3) 25%, transparent 25%),
linear-gradient(225deg, rgba(100, 100, 100, 0.3) 25%, transparent 25%),
linear-gradient(315deg, rgba(100, 100, 100, 0.3) 25%, transparent 25%),
linear-gradient(45deg, rgba(100, 100, 100, 0.3) 25%, transparent 25%);
background-color: #fffcf8;
background-size: 40px 40px;
background-position: 0 0, 20px 0, 20px 20px, 0 20px;
}
/* 之字形 */
.zigzag {
background:
linear-gradient(135deg, #fffcf8 25%, transparent 25%),
linear-gradient(225deg, #fffcf8 25%, transparent 25%),
linear-gradient(315deg, #fffcf8 25%, transparent 25%),
linear-gradient(45deg, #fffcf8 25%, transparent 25%);
background-color: rgba(100, 100, 100, 0.2);
background-size: 40px 40px;
}
/* 砖墙纹 */
.brick {
background:
linear-gradient(335deg, rgba(100, 100, 100, 0.4) 23px, transparent 23px),
linear-gradient(155deg, rgba(100, 100, 100, 0.4) 23px, transparent 23px),
linear-gradient(335deg, rgba(100, 100, 100, 0.4) 23px, transparent 23px),
linear-gradient(155deg, rgba(100, 100, 100, 0.4) 23px, transparent 23px);
background-color: #fffcf8;
background-size: 58px 34px;
background-position: 0 2px, 4px 35px, 29px 31px, 34px 6px;
}
/* 星空点点 */
.starry {
background:
radial-gradient(circle, rgba(100, 100, 100, 0.7) 1px, transparent 1px),
radial-gradient(circle, rgba(100, 100, 100, 0.5) 1.5px, transparent 1.5px),
radial-gradient(circle, rgba(100, 100, 100, 0.3) 0.5px, transparent 0.5px);
background-color: #fffcf8;
background-size: 50px 50px, 80px 80px, 100px 100px;
background-position: 0 0, 40px 60px, 130px 270px;
}
/* 编织纹 */
.weave {
background:
linear-gradient(45deg, transparent 46%, rgba(100, 100, 100, 0.4) 47%, rgba(100, 100, 100, 0.4) 53%, transparent 54%),
linear-gradient(-45deg, transparent 46%, rgba(100, 100, 100, 0.4) 47%, rgba(100, 100, 100, 0.4) 53%, transparent 54%);
background-color: #fffcf8;
background-size: 20px 20px;
}
/* 碳纤维纹 */
.carbon {
background:
radial-gradient(circle at 100% 100%, transparent 9px, rgba(100, 100, 100, 0.3) 9px, rgba(100, 100, 100, 0.3) 11px, transparent 11px),
radial-gradient(circle at 0 100%, transparent 9px, rgba(100, 100, 100, 0.3) 9px, rgba(100, 100, 100, 0.3) 11px, transparent 11px),
radial-gradient(circle at 100% 0, transparent 9px, rgba(100, 100, 100, 0.3) 9px, rgba(100, 100, 100, 0.3) 11px, transparent 11px),
radial-gradient(circle at 0 0, transparent 9px, rgba(100, 100, 100, 0.3) 9px, rgba(100, 100, 100, 0.3) 11px, transparent 11px);
background-color: rgba(100, 100, 100, 0.15);
background-size: 20px 20px;
background-position: 0 0, 10px 0, 10px 10px, 0 10px;
}
/* 噪点纹理 */
.noise {
background-color: #fffcf8;
background-image:
repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(100, 100, 100, 0.05) 2px, rgba(100, 100, 100, 0.05) 4px),
repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(100, 100, 100, 0.05) 2px, rgba(100, 100, 100, 0.05) 4px);
}
</style>
</head>
<body>
<div class="container">
<h1>🎨 CSS 背景图案演示</h1>
<div class="grid">
<div class="pattern-card">
<div class="pattern-preview diamond"></div>
<div class="pattern-info">
<h3>菱形网格</h3>
<p>使用双向线性渐变创建的菱形网格，适合现代简洁设计</p>
</div>
</div>
<div class="pattern-card">
<div class="pattern-preview dots"></div>
<div class="pattern-info">
<h3>点阵图案</h3>
<p>简洁的圆点阵列，常用于背景装饰</p>
</div>
</div>
<div class="pattern-card">
<div class="pattern-preview grid-pattern"></div>
<div class="pattern-info">
<h3>方格网格</h3>
<p>经典的方格图案，适合工具类应用</p>
</div>
</div>
<div class="pattern-card">
<div class="pattern-preview diagonal-stripes"></div>
<div class="pattern-info">
<h3>斜线条纹</h3>
<p>45度斜线条纹，动感十足</p>
</div>
</div>
<div class="pattern-card">
<div class="pattern-preview waves"></div>
<div class="pattern-info">
<h3>波浪纹</h3>
<p>柔和的波浪效果，营造流动感</p>
</div>
</div>
<div class="pattern-card">
<div class="pattern-preview hexagons"></div>
<div class="pattern-info">
<h3>六边形</h3>
<p>科技感的蜂巢图案</p>
</div>
</div>
<div class="pattern-card">
<div class="pattern-preview cross-hatch"></div>
<div class="pattern-info">
<h3>交叉线</h3>
<p>交叉斜线形成的织物纹理</p>
</div>
</div>
<div class="pattern-card">
<div class="pattern-preview circles"></div>
<div class="pattern-info">
<h3>圆形图案</h3>
<p>规则排列的圆形，复古风格</p>
</div>
</div>
<div class="pattern-card">
<div class="pattern-preview scales"></div>
<div class="pattern-info">
<h3>鱼鳞纹</h3>
<p>优雅的鱼鳞图案，适合艺术类设计</p>
</div>
</div>
<div class="pattern-card">
<div class="pattern-preview checkerboard"></div>
<div class="pattern-info">
<h3>棋盘格</h3>
<p>经典的棋盘格子，简洁大方</p>
</div>
</div>
<div class="pattern-card">
<div class="pattern-preview triangles"></div>
<div class="pattern-info">
<h3>三角形</h3>
<p>几何三角形拼接，现代感强</p>
</div>
</div>
<div class="pattern-card">
<div class="pattern-preview zigzag"></div>
<div class="pattern-info">
<h3>之字形</h3>
<p>锯齿波浪效果，活泼动感</p>
</div>
</div>
<div class="pattern-card">
<div class="pattern-preview brick"></div>
<div class="pattern-info">
<h3>砖墙纹</h3>
<p>仿砖墙排列，质感十足</p>
</div>
</div>
<div class="pattern-card">
<div class="pattern-preview starry"></div>
<div class="pattern-info">
<h3>星空点点</h3>
<p>多层次圆点，营造星空感</p>
</div>
</div>
<div class="pattern-card">
<div class="pattern-preview weave"></div>
<div class="pattern-info">
<h3>编织纹</h3>
<p>交织的线条，布料质感</p>
</div>
</div>
<div class="pattern-card">
<div class="pattern-preview carbon"></div>
<div class="pattern-info">
<h3>碳纤维纹</h3>
<p>科技感碳纤维材质</p>
</div>
</div>
<div class="pattern-card">
<div class="pattern-preview noise"></div>
<div class="pattern-info">
<h3>噪点纹理</h3>
<p>细腻的噪点效果，增加质感</p>
</div>
</div>
</div>
</div>
</body>
</html>
💬 评论