我目前正在使用 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;
}
上面的代码只是将背景图像应用到我的部分的右下角。我需要确保背景图像处于不拦截容器的最大宽度。
这是一张图表，可以更好地解释我想要做什么。
如何在不使用 jQuery/Javascript 的情况下实现这种效果？
提前致谢!
最佳答案
我想这就是你想要的——
转到整页查看。
检查片段
.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>关于html - Bootstrap : How to make a background image sit between the edge of the container and the edge of the body?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42580951/