效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti…
效果图
代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>banner</title> <style> * { margin: 0; padding: 0; border: 0; } .j-banner { position: relative; width: 100%; height: auto; padding: 100px 0 100px 0; background: #5993fa; z-index: 1; } .j-banner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.17; background-image: url("img/cloud-bg.svg"); background-repeat: no-repeat; background-size: cover; background-position: bottom center; z-index: 2; } .j-banner .j-title { text-align: center; font-size: 32px; color: #fff; } </style></head><body> <div class="j-banner"> <div class="j-title"> 马上开始您的云计算之旅,更多服务抢先体验 </div> </div></body></html>
svg素材打包下载
[url href=https://jiubx.com/wp-content/uploads/2020/04/202004140215262.zip]本地下载[/url]