Question

我的容器中有2行。在第二行中，我有2个元素one和two。现在我试图在那些几乎像背景的背后显示图像。这是html：

<div class="container">
  <div class="row">
    <img src="someimageurl" alt="" />
  </div>
  <div class="row">
    <div class="col-md-6">one</div>
    <div class="col-md-6">two</div>
  </div>
</div>

codepen

Answer 1

背景图片是您正在寻找的吗？

HTML

<div id=RowDivWithBackground class=row>
</div>

CSS

.RowDivWithBackground {
    background-image: url('url/to/image');
    other-css-do-dads /*Probably some rgba action*/
}

Answer 2

如果您确实需要使用img - 代码，请尝试使用position: fixed和z-index: -1（或-2，-3，...）

.container {
  border: 4px solid red;
  position: relative;
}

#imageAsBackground {
  z-index: -1;
  position: fixed;
}

<div class="container">
  <div class="row">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWTPbXeQy0Sy6xCbSwL_Vc4oQtMS-UNkUPOwRb3TxWHKKNlZ5Ycg" id="imageAsBackground" alt="" />
  </div>
  <div class="row">
    <div class="col-md-6">one</div>
    <div class="col-md-6">two</div>
  </div>
</div>

如果您可以将图像用作真实背景，请尝试使用css。

喜欢

.container{
  border: 4px solid red;
}

.coolBackground {
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWTPbXeQy0Sy6xCbSwL_Vc4oQtMS-UNkUPOwRb3TxWHKKNlZ5Ycg");
  background-size: cover;
}

<div class="container">
  <div class="row coolBackground">
    <div class="col-md-6">one</div>
    <div class="col-md-6">two</div>
  </div>
</div>

background-size: cover;会将图片调整为width的{{1}}。

Answer 3

使用css来做到这一点

ds.cloneWithRows(JSON.parse(facultyMembers))

我认为这可能会对你有所帮助

Answer 4

试试这段代码

HTML

<div class="row">
    <div class="bg clearfix">
    <div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium optio itaque quas ab facere, ipsa cumque consequatur nam id voluptatibus numquam, sapiente suscipit doloremque blanditiis non, ipsam sint vel molestias.</div>
    <div class="col-md-6">two</div>
    </div>
  </div>

CSS

.bg
{
  background-image:url(http://data.whicdn.com/images/12849966/large.jpg);
  background-position:center;
  background-size:cover;
}

希望有所帮助

Answer 5

检查他是否适合您。

CSS：

.container{
  border: 4px solid red;
  position: relative;
  overflow: hidden;
}
.contentBox {
  min-height: 300px
}
.imgBox {
  position: absolute;
  top: 0;
  let: 0;
  width: 100%;
  z-index: -1;
}
.imgBox img {
  width: 100%;
  margin: 0;
}

HTML：

<div class="container">

  <div class="row contentBox">
    <div class="col-md-6">one</div>
    <div class="col-md-6">two</div>
  </div>
  <div class="imgBox row">
    <img src="imageURL.jpg" alt="" />
  </div>
</div>

enter link description here

如何用bootstrap在div后面显示图像？

5 个答案: