如何使用CSS創建背景模式

使用CSS創建背景圖案是一種輕量且靈活的方法，可通過漸變、偽元素或多層背景實現；首先可通過repeating-linear-gradient()創建條紋或複雜漸變，其次利用多背景疊加實現波點或棋盤格效果，再通過偽元素添加噪聲紋理覆蓋層，最後需考慮響應式與可訪問性，確保高性能與可讀性，從而完全用CSS生成無需圖片的高清圖案。

Creating a background pattern with CSS is a lightweight and flexible way to add visual interest to your web pages without relying on images. You can generate repeating patterns using pure CSS with gradients, pseudo-elements, or even multiple backgrounds. Here's how to do it effectively.

1. Use CSS Gradients for Simple Patterns

CSS gradients are the most common way to create subtle or complex background patterns. You can use linear-gradient() or repeating-linear-gradient() to build patterns like stripes, checks, or waves.

Example: Diagonal Stripes

 .striped-bg {
  background: repeating-linear-gradient(
    45deg,
    #f0f0f0,
    #f0f0f0 10px,
    #ccc 10px,
    #ccc 20px
  );
}

This creates diagonal stripes by repeating a 20px pattern—10px light gray, 10px dark gray—at a 45-degree angle.

Example: Checkerboard Pattern

 .checkerboard-bg {
  background: 
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(45deg, #ccc 75%, transparent 75%),
    linear-gradient(45deg, transparent 25%, #ccc 25%);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
}

This uses multiple layered gradients to simulate a checkerboard. Each gradient contributes part of the black-and-white tile effect.

2. Combine Multiple Backgrounds for Complex Effects

You can layer several background images (or gradients) on a single element. This is useful for creating textures like polka dots, grids, or woven effects.

Example: Polka Dots

 .polka-bg {
  background: radial-gradient(#333 2px, transparent 2px);
  background-size: 20px 20px;
  background-color: #f0f0f0;
}

This creates small dark circles (dots) on a light background. Adjust the size and spacing by changing the background-size and radius.

3. Use Pseudo-elements for Overlay Patterns

Sometimes you want a semi-transparent pattern overlay on top of an image or color. You can use ::before or ::after to layer a pattern without affecting the main content.

Example: Subtle Noise Overlay

 .noise-bg {
  position: relative;
  background: url('your-image.jpg');
}

.noise-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 10px 10px;
  opacity: 0.1;
  pointer-events: none;
}

This adds a faint grain effect over any background, enhancing depth without distraction.

4. Responsive and Accessible Considerations

• Performance : CSS patterns are lightweight and scale well, unlike image assets.
• Contrast : Ensure text remains readable over the pattern. Use semi-transparent overlays if needed.
• Fallbacks : Always test how the pattern looks on different screen sizes and in dark mode.

You can also generate patterns using online tools like CSS Gradient or Lea Verou's Pattern CSS , then customize them.

Basically, with a bit of creativity and background-size , gradient , and layering, you can create almost any pattern—stripes, dots, checks, bricks, waves—entirely in CSS. No images required, and everything stays crisp at any resolution.

以上是如何使用CSS創建背景模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！