Html 在 Bootstrap 行中添加背景图像

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/35397709/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 18:57:16  来源:igfitidea点击:

Add background image in Bootstrap row

htmlcsstwitter-bootstrap

提问by aptbs85

I would like to insert a full-width background image on this part of my page. Could someone please tell me which css rule i should follow? Because as far as i know you canot insert a background image inside a row. thanks

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

回答by tao

When you want to add a background image, <img>is not the way to go. Use the background-imageproperty.

当您要添加背景图像时,<img>不是要走的路。使用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>

Please note that adding inline style is not recommended, I used it demonstrative here. The proper way to style your div would be to add a specific class or an ID to it and style it inside your CSS files.

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

In the snippet above I used the backgroundshorthand property to set the background-image. This shorthand allows setting background color, image, repeat, origin, clip, positionand sizein a single declaration. You can skip any of them, but sizemust be prefixed with a /and come right after position.

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

回答by OmerM25

You can set in your css file the background-image: url('img.png')property to define it.

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

For more options take a look here.

有关更多选项,请查看此处