<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>背景图片变暗处理</title> <style> .cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 0.25s; z-index: -1; } .cover .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; } .cover .gray { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: radial-gradient( rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.5) 100% ), radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3) 166%); } </style> </head> <body> <div id="app"> <div class="cover" data-v-ba72c8cd="" data-v-8b7899fe=""> <img class="bg" alt="cover" data-v-ba72c8cd="" src="http://peaktech.top/images/background8.webp" /> <div class="gray" data-v-ba72c8cd=""></div> </div> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 背景图片变暗处理 喜欢 (66)or分享 (0)
