如何在页面中随机放置背景元素？HTML/CSS实现body随机背景斑点问题求助

Hey Sahib! I see what you're going for—your current code creates a grid-patterned blob background (since the background-position and background-size are set to repeat uniformly), but you want those blobs to be scattered randomly instead. Let's fix that with a few practical approaches:

1. Pure CSS: Hand-Stacked Random Blobs #

If you want to stick to plain CSS, you can manually overlay multiple radial gradients with unique positions and sizes to mimic randomness. Adjust the number, size, position, and blob size percentage to tweak the look:

body {
  background: #222222;
  /* Stack multiple radial gradients with unique positions/sizes */
  background-image: 
    radial-gradient(#97F1FA 5%, transparent 0),
    radial-gradient(#97F1FA 8%, transparent 0),
    radial-gradient(#97F1FA 6%, transparent 0),
    radial-gradient(#97F1FA 7%, transparent 0),
    radial-gradient(#97F1FA 4%, transparent 0),
    radial-gradient(#97F1FA 9%, transparent 0),
    radial-gradient(#97F1FA 5%, transparent 0);
  background-size: 40px 40px, 60px 60px, 80px 80px, 50px 50px, 70px 70px, 30px 30px, 90px 90px;
  background-position: 
    10% 20%,
    30% 60%,
    50% 10%,
    70% 80%,
    25% 45%,
    85% 30%,
    40% 75%;
  min-height: 100vh; /* Ensure body covers the full viewport */
  margin: 0;
}

2. Preprocessor (Sass/LESS): Auto-Generate Random Blobs #

If you're using a CSS preprocessor like Sass, you can use a loop to generate dozens of random blobs automatically—no manual positioning required:

body {
  background: #222222;
  min-height: 100vh;
  margin: 0;
  
  $blob-count: 18; /* Number of blobs to generate */
  @for $i from 1 through $blob-count {
    background-image: radial-gradient(#97F1FA random(3,10)%, transparent 0);
    background-size: random(20,80)px random(20,80)px;
    background-position: random(0,100)% random(0,100)%;
  }
}

3. JavaScript: True Randomness (Refreshable) #

For fully dynamic, truly random blobs that change every time the page loads, use JavaScript to generate the background styles on the fly:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Blob Background</title>
    <style>
        body {
            background: #222222;
            min-height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <script>
        const body = document.body;
        const blobCount = 25; // Adjust how many blobs you want
        const blobs = [];
        const sizes = [];
        const positions = [];

        for (let i = 0; i < blobCount; i++) {
            // Random size (20-80px)
            const size = `${Math.floor(Math.random() * 60) + 20}px`;
            // Random position (0-100% on X/Y axis)
            const posX = `${Math.floor(Math.random() * 100)}%`;
            const posY = `${Math.floor(Math.random() * 100)}%`;
            // Random blob opacity and size percentage
            const opacity = Math.random() * 0.8 + 0.2; // 0.2-1.0 opacity
            const blobSize = `${Math.floor(Math.random() * 8) + 3}%`; // 3-10% blob size

            blobs.push(`radial-gradient(rgba(151, 241, 250, ${opacity}) ${blobSize}, transparent 0)`);
            sizes.push(`${size} ${size}`);
            positions.push(`${posX} ${posY}`);
        }

        // Apply all generated styles to the body
        body.style.backgroundImage = blobs.join(', ');
        body.style.backgroundSize = sizes.join(', ');
        body.style.backgroundPosition = positions.join(', ');
    </script>
</body>
</html>

The core issue with your original code was that it used repeating background positions (0 0, 15px 15px) which creates a tiled grid, not random placement. Any of the above methods will give you the scattered blob effect you're after!

内容的提问来源于stack exchange，提问作者Sahib Yar