时间戳

首页 > 解决方案 > 如何使用文本制作响应式背景

html - 如何使用文本制作响应式背景

问题描述

我正在尝试在带有背景图像的 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;
}

这是我得到的结果：我想修复它

在此处输入图像描述

在此处输入图像描述

标签： htmlcss

解决方案

我建议以下。outer代表你的尺寸。更改它的文本和图像会改变。另请参阅https://developer.mozilla.org/de/docs/Web/CSS/background-size

#background {
      background-image: url("https://www.gravatar.com/avatar/8f55e8c4bacf465accdc786b9ec1b392?s=64&d=identicon&r=PG&f=1");
      background-size: contain;
      background-repeat: no-repeat;
    }
    
#outer {
  width: 200px;
}
<div id="outer">

<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>
      
</div>

推荐阅读