首页css背景图片毛玻璃效果代码

css背景图片毛玻璃效果代码

时间: 2023-09-21 15:11:14 浏览: 149

以下是一个CSS背景图片毛玻璃效果的代码示例： ```html <!DOCTYPE html> <html> <head> <title>CSS背景图片毛玻璃效果</title> <style> /* 设置背景图片 */ body { background: url(background-image.jpg) no-repeat fixed; background-size: cover; } /* 设置毛玻璃效果 */ .blur { width: 100%; height: 100%; position: fixed; top: 0; left: 0; /* 使用多重背景实现模糊效果 */ background: /* 底层背景图片 */ url(background-image.jpg) no-repeat center center fixed, /* 上层背景图片，使用blur函数实现模糊效果 */ url(background-image.jpg) no-repeat center center fixed; background-size: cover; filter: blur(10px); -webkit-filter: blur(10px); /* 设置上层背景图片透明度，根据需求自行调整 */ opacity: .7; } </style> </head> <body>  <div class="blur"></div>  <h1>Hello, world!</h1> </body> </html> ``` 该示例使用CSS3的多重背景和blur函数实现了一个背景图片的毛玻璃效果。页面内容直接插入到body元素中即可。注意，这只是一个示例，实际应用中应该根据需求进行调整。

阅读全文