引导:如何使背景图像位于容器的边缘和身体的边缘之间？
引导:如何使背景图像位于容器的边缘和身体的边缘之间？
提问于 2017-03-03 14:03:51
我目前正在开发一个使用Twitter引导的网站。在网站的设计中，我有一个背景图像，位于容器的边缘和身体的边缘之间。
下面是我的密码。
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的情况下实现这种效果？
提前感谢！
回答 2
Stack Overflow用户
发布于 2017-03-03 14:51:26
我想这就是你想要的--
去看整页吧。
检查代码段
.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>
Stack Overflow用户
发布于 2017-03-03 15:35:31
CSS仅限-不使用jQuery/Javascript
如您所知，引导.container像素宽度取决于屏幕宽度。有3个独立的媒体查询用于此。您可以以相同的方式调整背景图像大小，在每个启动带断点。
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%，这样你的背景图像就会消失。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42580951
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号