【问题标题】:Add background image in Bootstrap row在 Bootstrap 行中添加背景图像
【发布时间】:2016-05-25 16:12:04
【问题描述】:

我想在页面的这一部分插入全角背景图片。有人可以告诉我应该遵循哪个 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>

【问题讨论】:

  • 你想让 标签图像作为标题和文本部分的背景吗?
  • 我认为你需要的不是虚幻的:jsfiddle.net/yym7d1ov

标签: html css twitter-bootstrap


【解决方案1】:

你可以在你的css文件中设置background-image: url('img.png')属性来定义它。

更多选项请查看here

【讨论】:

    【解决方案2】:

    当您想要添加背景图片时,&lt;img&gt; 不是要走的路。使用background-image 属性。

    <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 文件中对其进行样式设置。

    在上面的 sn-p 中,我使用了background 速记属性来设置background-image。此简写允许在单个声明中设置背景 colorimagerepeatoriginclippositionsize。您可以跳过其中任何一个,但size 必须以/ 为前缀,并紧跟在position 之后。

    【讨论】:

    • 也可以考虑background-size: cover;
    • @walkerrandophsmith,Andrei 的解决方案包含 background-size 规则,但包含在速记版本中。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-02-25
    • 2018-06-26
    • 2022-01-13
    • 2016-02-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多