html - 在 Bootstrap 行中添加背景图像

Question

我想在页面的这一部分插入一个全 Angular 背景图片。有人可以告诉我应该遵循哪个 css 规则吗？因为据我所知你不能在一行中插入背景图像。谢谢

    <header>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <img class="img-responsive" src="img/profile.png" alt="">
                    <div class="intro-text">
                        <span class="name">HEADING</span>
                        <hr class="star-light">
                        <span class="skills">TEXT</span>
                    </div>
                </div>
            </div>
        </div>
    </header>

Answer 1

当你想添加背景图片时，<img>不是要走的路。使用 background-image 属性(property)。

<header>
  <div class="container">
    <div class="row" 
         style="background:transparent url('img/profile.png') no-repeat center center /cover">
      <div class="col-lg-12">
        <div class="intro-text">
          <span class="name">HEADING</span>
          <hr class="star-light">
          <span class="skills">TEXT</span>
        </div>
      </div>
    </div>
  </div>
</header>

请注意，不推荐添加内联样式，我在这里使用它作为示范。设置 div 样式的正确方法是向其添加特定类或 ID，并在 CSS 文件中设置样式。

在上面的代码片段中，我使用了 background 设置 background-image 的速记属性.此速记允许设置背景 color , image , repeat , origin , clip , position和 size在一个声明中。你可以跳过其中任何一个，但是 size必须以 / 为前缀在position之后马上过来.