css – Bootstrap 3将左右背景图像放到浏览器边缘

2024年1月30日 242次阅读

《css – Bootstrap 3将左右背景图像放到浏览器边缘》

这就是我想要实现的目标.顶部框,背景图像跨越整个浏览器宽度,内部有2个内容框.我做到了没问题.

然后,我需要再下2个盒子,再次居中,但是每一半都需要一个不同的背景图像,它应该在中间相遇并且流到它们各自的边缘.我正在使用bootstrap因为我希望这些在较小的屏幕上堆叠.我无法弄清楚这是怎么可能的.黑色边框代表容器.我可以将顶部位包装在自己的容器中,这很好,但我无法弄清楚如何让底部工作,我真的不想使用绝对定位,因为它将是一个噩梦得到工作的响应元素.

这是我到目前为止所拥有的

HTML：

<div class="fluid-full">
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="example">
                <h1>Title</h1>
                <p>This is a paragraph</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="example">
                <h1>Title</h1>
                <p>This is a paragraph</p>
            </div>
        </div>
    </div>
</div>
</div>
<div class="container">  
    <div class="row">
        <div class="col-md-6 left-half">
            <div class="example">
                <h1>Title</h1>
                <p>This is a paragraph</p>
            </div>
        </div>
        <div class="col-md-6 right-half">
            <div class="example">
                <h1>Title</h1>
                <p>This is a paragraph</p>
            </div>
        </div>
    </div>
  </div>

CSS：

.example{
    height: 200px;
    border: 1px;
    background-color: rgba(0,0,0,0.8);
    padding: 30px;
    border: 1px solid white;
    color: white;

}
.fluid-full{
    padding: 40px 0;
    background-image: url(http://lorempixel.com/1920/400);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;

    }
.left-half{

    border-left: 25% solid transparent;
     background-image: url(http://lorempixel.com/g/1000/400);
      background-position: right;
      background-repeat: no-repeat;
      background-size: cover;

}

结帐Bootply

我需要顶部和底部的盒子排成一行.

任何帮助赞赏.

最佳答案 我把你的Bootply示例和修改后的位置改为：

<div class="col-md-6 fluid-half">
  <div class="example col-md-6 pull-right"> 
    <h1 class="text-center">LEFT</h1>
</div>
</div>
<div class="col-md-6 fluid-half">
  <div class="example col-md-6 pull-left">
    <h1 class="text-center">RIGHT</h1>
  </div>
</div>

这是Bootply modification

这是你想要实现的吗？

点赞