如何使用文本制作自适应背景

时间:2019-04-05 09:25:31

标签: html css

我正在尝试在具有背景图像的div上写一些文本,我编写了此代码,但它没有响应。如何使图像和文本具有响应性

HTML:

 <div class="h-100" id="background">
    <div class="container pt-5">
      <div class="row">
        <div class="col-6">
          <h2 class="text-danger">WEBO DESIGN</h2>
<h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum dicta aliquam assumenda dolores adipisci! Quae reprehenderit quisquam fuga necessitatibus exercitationem ipsa consequatur enim itaque quam commodi unde, voluptas assumenda porro id qui voluptatem nobis atque. Aliquam autem perferendis maiores, est deserunt fuga quaerat, quibusdam et eos numquam nam, repellat obcaecati!</h5>
        </div>
      </div>
    </div>
  </div>

CSS:

#background {
  background-image: url("../imgs/header.png");
  background-size: cover;
  background-repeat: no-repeat;
}

这是我得到的结果: 我要修复

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:0)

我建议以下内容。 RewriteCond %{THE_REQUEST} ^GET.*index\.php [NC] RewriteRule (.*?)index\.php/*(.*) /$1$2 [R=301,NE,L] 代表您的尺寸。更改它,文本和图像将改变。另请参见https://developer.mozilla.org/de/docs/Web/CSS/background-size

        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" src="https://www.mysite:8080/socket.io/socket.io.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
        <script type="text/javascript" src="js/socket.io-stream/socket.io-stream.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/env.js"></script>
        <script type="text/javascript" src="js/MaResidence.js"></script>
        <script type="text/javascript" src="js/common/Dropdown.js"></script>
        <script type="text/javascript" src="js/common/FileManager.js"></script>
        <script type="text/javascript" src="js/common/PageManager.js"></script>
        <script type="text/javascript" src="js/common/SocketManager.js"></script>
        <script type="text/javascript" src="js/common/utils.js"></script>
        <script type="text/javascript" src="js/common/pages/Page.js"></script>
        <script type="text/javascript" src="js/common/pages/Accueil.js"></script>
        <script type="text/javascript" src="js/pages/Login.js"></script>
        <script type="text/javascript" src="js/pages/Discussions.js"></script>
outer