直接使用代码

图片素材

点击下载本素材所包含的图片，js文件

css代码

 <style>
.bg-cover {
    background-repeat: no-repeat;
    -webkit-background-size: cover;
            background-size: cover;
    background-position: center center; }
        /* banner */
section.jumbotron{position:relative;margin:0}
section.jumbotron.overlay-color:before{position:absolute;top:0;left:0;z-index:20;width:100%;height:100%;background-color:#0f6f7b;content:"";opacity:.8}
section.jumbotron .jumbotron-inner{position:relative;z-index:100;padding:40px 0;max-width:90%}
section.jumbotron .jumbotron-inner.center-content{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
@media (max-width:767px){section.jumbotron .jumbotron-inner.center-content{display:block}
}
@media (min-width:768px) and (max-width:991px){section.jumbotron .jumbotron-inner{max-width:80%}
}
@media (max-width:767px){section.jumbotron .jumbotron-inner{width:auto;max-width:none;text-align:center}
}
section.jumbotron .jumbotron-inner .title,section.jumbotron .jumbotron-inner q{display:block;margin:0;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);font-weight:400;font-size:30px}
@media (max-width:767px){section.jumbotron .jumbotron-inner .title,section.jumbotron .jumbotron-inner q{font-size:25px}
}
section.jumbotron .jumbotron-inner .image-column{text-align:right;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}
section.jumbotron .jumbotron-inner .image-column img{margin:-48px 0;width:100%}
section.jumbotron .jumbotron-inner .lead,section.jumbotron .jumbotron-inner .quote-owner{display:block;margin-bottom:0;padding-top:20px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);font-size:19px}
.navbar-nav>.dropdown>.dropdown-menu section.jumbotron .jumbotron-inner a.btn,section.jumbotron .jumbotron-inner .btn,section.jumbotron .jumbotron-inner .navbar-nav>.dropdown>.dropdown-menu a.btn{margin-top:40px}
section.jumbotron.jumbotron-small .jumbotron-inner{padding:0;width:auto;max-width:none}
@media (max-width:767px){section.jumbotron.jumbotron-small .jumbotron-inner>div{text-align:center}
section.jumbotron.jumbotron-small .jumbotron-inner .title{padding-bottom:20px}
}

.jumbotron .index-btn{background: #e60012;color:#fff;border:none;border-radius: 6px;margin-top:5px;display: inline-block;padding:10px 15px}
.jumbotron .index-btn:hover{background: #ff3e4d;}
.jumbotron .index-btn .b-img-box{display: inline-block;width:20px;}
.jumbotron .index-btn img{margin-top:-3px; transition:margin 0.3s;}
.jumbotron .index-btn:hover img{margin-left:5px}

</style>

HTML+JS代码

 <br><br>
<section class="jumbotron bg-cover"
style="background-image: url('http://www.bootfastui.cn/img/2021/0307-5/jcr_content.jpg')"
data-lang="default">
<div class="container">
    <div class="jumbotron-inner">
        <h2 class="title">下载2021版电路保护选型指南</h2>
        <p class="lead"></p>
        <a class="index-btn"
            href="http://bootfastui.com"
            title="立即下载" target="_blank">立即下载
            <span class="b-img-box">
                <img src="http://www.bootfastui.cn/img/2021/0307-5/ico_right_white.png" alt="" width="13">
            </span>
        </a>
    </div>
</div>
</section>
<br><br>
<section class="jumbotron bg-cover"
style="background-image: url('http://www.bootfastui.cn/img/2021/0307-5/index_banner5.png')"
data-lang="default">
<div class="container">
    <div class="jumbotron-inner">
        <h2 class="title">我们的行业要求卓越，我们以解决方案来响应性能、尺寸和容量的界限</h2>
        <p class="white line40 f15">我们所做的事无与伦比，您可以参与其中。</p>
        <p class="lead"></p>
        <a class="index-btn"
            href="http://bootfastui.com"
            title="加入我们" target="_blank">加入Semiware的创新者团队
            <span class="b-img-box">
                <img src="http://www.bootfastui.cn/img/2021/0307-5/ico_right_white.png" alt="" width="13">
            </span>
        </a>
    </div>
</div>
</section>