html - 使用Bootstrap-4垂直分割屏幕的一半，以显示图像直到屏幕边缘

我很难用Bootstra-4 .container类开发类似1-left-side-full-image.jpg的东西。

我已经说明了目标（1-left-side-full-image.jpg）的问题（2-background-image-outside-container.jpg，3-container-fluid.jpg，4-container-only.jpg）

Well Here's a codepen link https://codepen.io/srmahmud2/pen/vaONJQ

最佳答案

你想做这样的事情吗？



您可以通过组合背景图像和线性渐变来实现。

section {
    background: linear-gradient(to right, transparent 50%, #fff 50%),
        url('https://images.pexels.com/photos/731082/pexels-photo-731082.jpeg?
            auto=compress&cs=tinysrgb&dpr=2&h=650&w=940') no-repeat top left;
    background-size: cover;
}

这里的想法是先加载线性渐变的背景，左侧50％透明，右侧50％白色，然后加载背景图像。

<section>
    <div class="container">
       <div class="row">
           <div class="col-sm-6 offset-sm-6">
               ...
           </div>
       </div>
    </div>
</section>

小提琴：http://jsfiddle.net/aq9Laaew/94438/

这种方法最酷的是，您可以在linear-gradient()中放置一定角度以形成更冷的背景（IMO），如下所示：



只需更改linear-gradient()函数

background: linear-gradient(135deg, transparent 50%, #fff 50%),
    url('https://images.pexels.com/photos/731082/pexels-photo-731082.jpeg?
        auto=compress&cs=tinysrgb&dpr=2&h=650&w=940') no-repeat top left;

关于html - 使用Bootstrap-4垂直分割屏幕的一半，以显示图像直到屏幕边缘，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51314602/