背景图响应式

最新推荐文章于 2024-09-15 09:00:00 发布

原创最新推荐文章于 2024-09-15 09:00:00 发布 · 522 阅读

0 ·

CC 4.0 BY-SA版权

前端非框架常用专栏收录该内容

7 篇文章

订阅专栏

<!--big image-->
<div class="searchImage">
    <img id="seImg" src="images/banner.png">
    <div class="searchMes">
        <h2> 信 息 数 据 搜 索</h2>
        <p><span>专 业 快 速</span><span>一 键 搜 索</span><span>让 您 的 想 法 变 成 现 实</span></p>
    </div>
</div>

/*css*/

/*big image*/
.searchImage{
    width: 100%;
    height: 300px;
    position: relative;
}
.searchImage #seImg{
    width:100%;
    height:100%;
    position: absolute;
    z-Index:-1;
    left: 0;
    top: 0;
}
.searchMes{
    position: absolute;
    width:60%;
    height: 68%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding-top: 3%;
}

.searchMes h2{
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    text-align: center;
}
.searchMes p{
    color: #fff;
    font-size: 16px;
    text-align: center;
    margin-top: 20px;
}
.searchMes p span{
    margin-left: 20px;
}
.searchMes p span:first-child{
    margin-left: 0px;
}