效果图
代码
<!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]
加群入久伴博客官方微信群
加入久伴官方微信群有啥优势?
1.文章内部资源由于时间久远可能失效,加群,群内可以第一时间反馈
2.网站中教程不一定适用任何人,加群可以第一时间咨询并解决您得疑惑
3.你游荡于互联网,也需要群体,加群一起互动交流,畅所欲言
扫描下方二维码即可加入交流讨论
