Question

我目前正在使用Twitter Bootstrap开发网站。在网站的设计中，我有一个背景图像，它位于容器边缘和身体边缘之间。

以下是我的代码。

HTML：

<body>
    <section>
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <h1>Lorem Ipsum.</h1>
                </div>
            </div>
        </div>
    </section>
</body>

CSS：

section {
   background-image: url('example.png');
   background-repeat: no-repeat;
   background-position: bottom right;
}

上面的代码只是将背景图片应用到我的部分的右下角。我需要确保背景图像处于最大宽度，而不会拦截容器。

这是一张可以更好地解释我想要做的事情的图表。

Diagram

如何在不使用jQuery / Javascript的情况下实现此效果？

提前致谢！

Answer 1

我认为这就是你想要的 -

转到整页查看。

检查代码段

.container-fluid  {
   background: url('http://www.jonomus.net/wp-content/uploads/2015/10/Screenshot_2015-10-20-10-06-10.png');
   background-position: right bottom;
   background-repeat: no-repeat;
   background-size: 130px 130px;
}
.col-xs-6 {
  background-color:yellow;
  color: red;
  height:400px;
}

<html>
<head>

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
       </head>
      
<body>
    <section>
    <div class="container-fluid ">
       
            <div class="row">
                <div class="col-xs-6 col-xs-offset-3">
                    <h1>Lorem Ipsum.</h1>
                </div>
            </div>
        </div>
       
    </section>
</body>
</html>

Answer 2

仅限CSS - 不使用jQuery / Javascript

您可能知道，Bootstrap .container像素宽度会根据屏幕宽度而变化。有三个单独的媒体查询用于此。您可以在每个Bootstrap断点处以相同的方式调整背景图像大小。

section {
   min-height: 100vh;
   background-image: url('//placehold.it/300');
   background-repeat: no-repeat;
   background-position: right bottom; 
   background-attachment: fixed;
}    

@media (min-width: 768px) {
    section {
        background-size: calc((100% - 750px)/2);
    }
}
@media (min-width: 992px) {
    section {
        background-size: calc((100% - 970px)/2);
    }
}
@media (min-width: 1200px) {
    section {
        background-size: calc((100% - 1170px)/2);
    }
}

演示：http://www.codeply.com/go/985dNICmvQ

注意：在xs屏幕上，容器变为100％宽度，因此您的背景图像将消失。

Bootstrap：如何使背景图像位于容器边缘和身体边缘之间？

2 个答案: