Question

我正在使用Boostrap 3创建一个页面。我有一段内容偏移了4列并带有一些空格。我有一个图像/背景，宽度为1200像素，我希望与列对接，但延伸到页面左侧。

我的目标是，如果用户水平扩展浏览器，将显示更多的背景，但绝不允许它与内容重叠。

关于如何解决此问题的任何想法？

这是我的代码：

<style>
    section#moreFeatures {
        background-image: url(/img/Backgrounds/moreFeatures.jpg);
        background-repeat: no-repeat;
        background-position: -540px 50%;
    }
</style>

<section id="moreFeatures" class="with-padding">
    <div class="container">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-2 col-md-8 col-md-offset-4 col-lg-7 col-lg-offset-5">
                <h1>
                    Simple, Effective, and Elegant.
                    <br><small>Without sacrificing robust features.</small>
                </h1>
                <br>    
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a ipsum sit amet metus blandit vestibulum. Cras et mauris eros. Nam sed eros at orci imperdiet pharetra. Pellentesque volutpat luctus lorem, quis sodales felis auctor vitae. Suspendisse potenti. Vivamus in purus magna. Etiam blandit neque ac pulvinar tincidunt. Morbi porta porttitor neque in tempus. Cras volutpat, enim sed vulputate accumsan, lectus sapien semper leo, sit amet malesuada erat sapien at dolor. Nullam nibh tellus, fermentum non elit et, ultrices hendrerit est.</p>
                <p>Quisque mollis nunc sagittis tellus molestie, at suscipit nulla posuere. Fusce interdum eu eros vel rutrum. Proin id arcu convallis, iaculis arcu sed, rutrum ligula. Aliquam dignissim faucibus ultrices. Sed facilisis ipsum vel tempus condimentum. Phasellus molestie ut risus et iaculis. Nulla sem tellus, consequat a magna pharetra, aliquet tincidunt eros. Cras velit lectus, lacinia nec nisi at, eleifend egestas sem. Aenean egestas dictum dui, eget mollis magna viverra imperdiet. Integer consequat libero dui, vitae viverra nunc malesuada adipiscing. Aliquam ac urna at sem placerat auctor.</p>
                <p>Duis eleifend tellus libero, eu varius tortor congue nec. Maecenas egestas metus ut adipiscing ultrices. Curabitur sit amet arcu massa. Curabitur a sapien sit amet lorem feugiat tristique a ut augue. Aliquam in elit vel quam sagittis viverra vel eu odio. Integer mi sem, lacinia id ullamcorper id, elementum ac lacus. Curabitur ante dolor, viverra ut libero vel, vulputate vulputate orci. Proin mollis felis in erat vulputate, ut ornare tellus porta. Donec tristique fermentum velit vel ultrices. Curabitur sed sapien ipsum. In sed odio malesuada, ornare lacus eget, elementum est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel rutrum nunc, id feugiat lorem. Nunc auctor dapibus ligula vel imperdiet.</p>
            </div>
        </div>
    </div>
</section>

Answer 1

你可以使用 -

section#moreFeatures {
    background: #dbdbdb url(http://lorempixel.com/1600/1600) fixed;
    background-repeat: no-repeat;
    background-position: center center;
}

点击 DEMO

Answer 2

经过一番研究后，我发现你不能在指定的容器外放置背景。

话虽这么说，我通过jQuery和一些创造性地使用正面填充与负边距混合使用。这是我的解决方案。

<script>
    $(document).ready(function () {
        var backgroundWidth = 1052; // Width of the background image //
        var containerGutter = ($(window).width() - $('div#moreFeaturesContainer').width()) / 2;
        var columnGutter = parseInt($('div#simpleEffectiveElegant').css('margin-left').replace(/[^-\d\.]/g, ''));

        var backgroundPosition = backgroundWidth - containerGutter - columnGutter;

        $('section#moreFeatures').css('margin-left', '-' + backgroundPosition+ 'px');
        $('section#moreFeatures').css('padding-left', backgroundPosition + 'px');

        $(window).on('resize', function() {
            var backgroundWidth = 1052;
            var containerGutter = ($(window).width() - $('div#moreFeaturesContainer').width()) / 2;
            var columnGutter = parseInt($('div#simpleEffectiveElegant').css('margin-left').replace(/[^-\d\.]/g, ''));

            var backgroundPosition = backgroundWidth - containerGutter - columnGutter;

            $('section#moreFeatures').css('margin-left', '-' + backgroundPosition + 'px');
            $('section#moreFeatures').css('padding-left', backgroundPosition + 'px');
        });
    });
</script>

Answer 3

只有CSS解决方案涉及使用div而不是偏移并使用图像标记而不是背景显示图像。这里的诀窍是使用direction:rtl，以便溢出的图像向左移动。

此处的Plunker：http://plnkr.co/edit/csbXfZmLRtDHcOjgd3It?p=preview

CSS

.overflow {
  text-align:right;
  overflow:visible;
  direction: rtl;
}

HTML

  <div class="container-fluid">
    <div class="row">
      <div class='col-sm-2 col-md-4 col-lg-5 overflow'>
        <img src="http://lorempixel.com/1600/1600">
      </div>
      <div class="col-sm-10 col-md-8 col-lg-7">
        <h1>
                Simple, Effective, and Elegant.
                              <br />
          <small>Without sacrificing robust features.</small>
        </h1>
        <br />
        <br />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a ipsum sit amet metus blandit vestibulum. Cras et mauris eros. Nam sed eros at orci imperdiet pharetra. Pellentesque volutpat luctus lorem, quis sodales felis auctor vitae. Suspendisse potenti. Vivamus in purus magna. Etiam blandit neque ac pulvinar tincidunt. Morbi porta porttitor neque in tempus. Cras volutpat, enim sed vulputate accumsan, lectus sapien semper leo, sit amet malesuada erat sapien at dolor. Nullam nibh tellus, fermentum non elit et, ultrices hendrerit est.</p>
        <p>Quisque mollis nunc sagittis tellus molestie, at suscipit nulla posuere. Fusce interdum eu eros vel rutrum. Proin id arcu convallis, iaculis arcu sed, rutrum ligula. Aliquam dignissim faucibus ultrices. Sed facilisis ipsum vel tempus condimentum. Phasellus molestie ut risus et iaculis. Nulla sem tellus, consequat a magna pharetra, aliquet tincidunt eros. Cras velit lectus, lacinia nec nisi at, eleifend egestas sem. Aenean egestas dictum dui, eget mollis magna viverra imperdiet. Integer consequat libero dui, vitae viverra nunc malesuada adipiscing. Aliquam ac urna at sem placerat auctor.</p>
        <p>Duis eleifend tellus libero, eu varius tortor congue nec. Maecenas egestas metus ut adipiscing ultrices. Curabitur sit amet arcu massa. Curabitur a sapien sit amet lorem feugiat tristique a ut augue. Aliquam in elit vel quam sagittis viverra vel eu odio. Integer mi sem, lacinia id ullamcorper id, elementum ac lacus. Curabitur ante dolor, viverra ut libero vel, vulputate vulputate orci. Proin mollis felis in erat vulputate, ut ornare tellus porta. Donec tristique fermentum velit vel ultrices. Curabitur sed sapien ipsum. In sed odio malesuada, ornare lacus eget, elementum est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel rutrum nunc, id feugiat lorem. Nunc auctor dapibus ligula vel imperdiet.</p>
      </div>
    </div>
  </div>

CSS Bootstrap：背景溢出可见区域

3 个答案: