如何使用引导程序 4 将背景图像添加到行答案

【问题标题】：How to add background image to row using bootstrap 4如何使用引导程序 4 将背景图像添加到行
【发布时间】：2018-05-20 21:02:42
【问题描述】：

我一直在尝试从 bootstrap 4.1 向行类添加背景图像，但甚至无法在页面上的任何位置显示图像。我在网上看到的任何解决方案都没有奏效。

我正在使用

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css\overwrite.css">

所有的 JS 链接都在我的 body 标签的末尾。

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

这是我的html代码

<div id ="diagL" class ="row text-center">
<div class ="col-sm-6">
  <p id="txtzoom" class ="display-1 font-weight-bold">ART.</p>
</div>
<div class ="col-sm-6">
  <p id="txtzoom" class ="display-1 font-weight-bold text-warning">SCIENCE.</p>
</div>

至于我的 CSS 代码，我一遍又一遍地修改它，试图让图像显示出来

#diagL{
 z-index:99;
 position:absolute;
 background: transparent !important;
 background: url("../images/BG/DiagnolL.jpg") !important;
 background: no-repeat !important;
 background: center center;
 background: cover !important;
}

我尝试过的事情：

使用不同的容器，例如：container、container-fluid、d-flex 或只是单独使用 div。
尝试以不同的方式 url() 我的图像，例如：url("/images/BG/DiagnolL.jpg") 这是从“复制项目路径”复制的确切目录
尝试将 CSS 直接添加到 html 内联 "style =' ...'"

注意：我尝试向容器添加背景颜色，效果非常好，但理想情况下我希望在整个行容器中显示背景图像。

在这一点上，我相信我已经尝试了一切，除了尝试使用 javascript，但我不能完全确定如何应用它。如果有人可以让我知道是否不可能，以便我可以继续尝试其他方法，我将不胜感激。

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

您使用了不正确的css 属性。背景的no-repeat、size 和position 分别使用background-repeat、background-size 和background-position。但是，最好使用速记背景。

.row {
  background: url('#path') center / cover no-repeat;
}

最重要的是，您不应更改 img 的 position 并因此删除 position:absolute。 img 路径也可能存在问题。

.row {
  background: url('https://upload.wikimedia.org/wikipedia/commons/c/ca/The_Sky_Garden.jpg');
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col">
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis excepturi nesciunt facere magni ratione quaerat quo, quisquam blanditiis reiciendis a facilis accusamus ad dolore voluptatibus quam iusto asperiores aliquam nisi. Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Quas eos ipsum corrupti dolore dolor placeat maxime, consequatur voluptate unde possimus optio veritatis architecto reiciendis nulla rerum dolorem a, voluptates non.
      </p>
    </div>
    <div class="col">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis sed nobis ratione natus exercitationem dolores suscipit dolore ab voluptatum expedita quo facilis laboriosam, soluta molestias nemo, possimus excepturi nihil odio! Lorem ipsum dolor
      sit amet consectetur adipisicing elit. Quas eaque quae id, nam harum assumenda libero molestias aperiam corrupti consequatur, est doloribus vel corporis, ad consequuntur iure tenetur eum commodi!

    </div>
  </div>
</div>

全屏查看代码

您可能会在css-tricks 上发现这篇文章很有帮助

【讨论】：

非常感谢！我让它工作，但使用你从维基百科提供的相同图像。在某些时候，我可能有这段代码，但认为它不起作用，因为这是我的 img 路径错误。由于 images/BG/DiagnolL.jpg 似乎不起作用，我该如何放置我的 img 路径来使用我的图像？
我猜你使用的路径不正确。它应该相对于index.html。在网络浏览器中打开 img，从地址栏中复制其相对路径并使用它。

【解决方案2】：

你为什么使用

background: transparent !important
background: url("../images/BG/DiagnolL.jpg") !important;

如果我是你，我会先检查一下。透明背景在 url 之前。都!important 一个或另一个。背景不能同时透明和可见[!important标签]。如果有疑问，第一个选项优先，第二个被忽略。

【讨论】：