质感背景 – 有爱前端

<!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>质感背景</title> <style> html { --gradient-bg: radial-gradient(125% 125% at 100% 100%, hsl(25 98% 70%), hsl(25.0726 101.157% 75.9572%), hsl(25.1131 104.095% 81.5192%), hsl(25.1134 106.324% 86.4415%), hsl(25.0846 107.15% 90.5002%), hsl(25.045 105.768% 93.5182%), hsl(25.0124 102.277% 95.3742%), hsl(25 99.9999% 96%)); --color-orange-medium-hsl: 25 98% 70%; --card-bg-l: radial-gradient( 125% 125% at 100% 100%, hsl(25 98% 68% / 0.2), hsl(24.6553 101.725% 73.0024% / 0.185714), hsl(24.3417 105.785% 77.8433% / 0.171429), hsl(24.0328 110.218% 82.5509% / 0.157143), hsl(23.7159 115.08% 87.1306% / 0.142857), hsl(23.3841 120.451% 91.5759% / 0.128571), hsl(23.033 126.438% 95.8727% / 0.114286), hsl(194.325 360.352% 100% / 0.1) ); } body { padding: 0; margin: 0; min-height: 100vh; overflow: hidden; color: #a16236; background: var(--gradient-bg), var(--grain-square-white-opacity-blend); background-blend-mode: overlay; } .box{ width: 500px; height: 500px; padding-top: 180px; box-sizing: border-box; margin: 5vh auto 24px; text-align: center; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .5); background: var(--card-bg-l), var(--grain-square-white-opacity-blend); box-shadow: -4px -4px 32px 0px hsl(var(--color-orange-medium-hsl) / 12%), 4px 4px 16px 0px hsl(var(--color-orange-medium-hsl) / 8%); background-blend-mode: overlay; } </style> </head> <body> <div class="box"> background-blend-mode 属性定义了背景层的混合模式 </div> <script> const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); function grain(size, name, color) { canvas.width = size; canvas.height = size; ctx.fillStyle = color; for (let x = 0; x < size; x++) { for (let y = 0; y < size; y++) { if (Math.random() > 0.5) { ctx.fillRect(x, y, 1, 1); } } } canvas.toBlob((blob) => { const url = URL.createObjectURL(blob); document.documentElement.style.setProperty(name, `url(${url})`); }); } // grain(256, "--grain-square-black", "hsla(0, 100%, 0%, 1)"); // grain(256, "--grain-square-white", "hsla(0, 100%, 100%, 1)"); grain(256, "--grain-square-white-opacity-blend", "hsla(25, 100%, 96%, 0.1375)"); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 质感背景