首页css 背景图片模糊渐变

css 背景图片模糊渐变

时间: 2023-12-05 22:40:36 浏览: 139

要实现CSS背景图片的模糊渐变，可以使用CSS3的`backdrop-filter`属性。这个属性可以在元素的背景和元素本身之间添加一个模糊效果，从而实现背景图片的模糊渐变效果。以下是一个实现CSS背景图片模糊渐变的例子： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS Background Blur Gradient</title> <style> body { background-image: url('pic.png'); background-size: cover; height: 100vh; display: flex; align-items: center; justify-content: center; } .blur { width: 300px; height: 300px; background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; font-size: 30px; color: #333; } </style> </head> <body> <div class="blur">Hello World!</div> </body> </html> ``` 在这个例子中，我们首先设置了一个背景图片，并将其大小设置为`cover`，以充满整个屏幕。然后，我们创建了一个带有模糊效果的元素，并将其放置在屏幕中央。最后，我们在这个元素中添加了一个文本，以便查看模糊效果。

阅读全文