背景图响应式

版权声明:仅仅菜鸟,愿帮到工作中预bug困惑的您 https://blog.csdn.net/weixin_41716259/article/details/82992364

<!--html-->

<!--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;
}

猜你喜欢

转载自blog.csdn.net/weixin_41716259/article/details/82992364