bootstrap之背景图片+文字2_bootstrap怎么在图片上加文字-CSDN博客

本文链接：https://blog.csdn.net/zhaolulu916/article/details/102880597

一 .效果如下

技术要点：

1.背景图片拉伸 background-repeat: no-repeat; background-size: cover;

2.文字居中 text-align: center;

二 html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="bootstrap.min.js"></script>
    <link href="app3.css" rel="stylesheet">
</head>
<body>
    <div class="treepage">
        <div class="treepage-bg" id="treepagebg">
        <div class="treepagecontent">
            <div class="treepagetext">
                <h1>为什么要学习编程</h1>
                <p>daily life</p>
                <p>只要你坚持，就是小菜一碟</p>
            </div>
            <a href="#"  class="btn btn-success btn-lg treepagebtn">快速学习</a>
        </div>
    </div>
</div>
</body>
</html>

三 app3.css

.treepage{
    position: absolute;
    width:100%;
    height:1200px;
}

.treepage-bg{
    position: absolute;
    height:100%;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#treepagebg{
    background-image: url("img/3.png");
}

.treepagecontent{
    width:100%;
    margin:0 auto;
    text-align: center;
}

.treepagetext{
    margin-top:100px;
}

.treepagetext p{
    margin-top:20px;
    color:#000;
    font-size:20px;
    line-height:10px;
}

.treepagebtn{
margin-top:450px;
font-size:25px;
}