图片叠加不规则文字层效果
代码语言:html
所属分类:布局界面
代码描述:图片叠加不规则文字层效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; box-sizing: border-box; } body { font-family: sans-serif; } .row { display: -webkit-box; display: flex; flex-wrap: wrap; } .col-6 { -webkit-box-flex: 0; flex: 0 0 50%; } .h-100 { height: 100% !important; } .p-5 { padding: 3rem !important; } #section01 { overflow: hidden; } #section01 .row { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse; } #section01 .bannerImage { background: url("http://repo.bfw.wiki/bfwrepo/image/5e62efa9e6df8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_1200,h_600,/quality,q_90"); background-size: cover; background-position: center center; background-color: #3253DC; } #section01 .bannerText { background-color: #3253DC; position: relative; z-index: 1; } #section01 .bannerText .oval { position: absolute; background-color: #3253DC; top: -50%; right: 0; border-radius: 100%; z-index: -1; content: ''; } @media screen and (max-width: 991px) { #section01 .row { display: block; } #section01 .bannerText { padding: 0 0 3em !important; } #section01 .bannerText > .p-5 { padding: 1rem 2rem !important; } } /* #section01 { height: ${bannerHeight}px; }*/ h1, h3 { margin-bottom: 24px; color: #fff; } p { color: #d8d8d8; } h1 { font-size: 48px; } h3, p { font-size: 18px; } </style> </head> <body translate="no"> <section id="section01"> <div class="row h-100"> <div class="col-6 bannerImage"></div> <div class="col-6 my-auto p-5 bannerText"> <div class="oval"></div> <div class="p-5"> <h1>This is a banner overlay with some text.</h1&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0