我希望能够拥有一个背景，它不会在浏览器窗口调整大小时调整大小，而是看起来像是将背景滑动到其内容后面。 http://portal.office.com是我想要获得的外观的完美示例。我什至不确定这种效果叫什么，所以我什至不知道去哪里看，或者这是否主要是用 jQuery 或 CSS 完成的。任何指针将不胜感激。谢谢。
编辑
正如 Stephan 指出的那样，background-size: cover 很接近，但它只是在浏览器边缘切断图像，而不是在调整窗口大小时背景被其他内容切断.
最佳答案
Microsoft 站点正在使用 js 调整图像大小。当您垂直而不是水平调整浏览器大小时，它似乎只会调整大小。图像需要修复才能正常工作。
您可以执行 background-size: cover，但它会不断调整大小。您还可以使用媒体查询来阻止图像调整大小并将背景大小更改为自动并使用媒体查询。
Aeolingamenfel 所说的另一个选项是设置最大宽度。
这应该会给您一个良好的开端，但它需要更多的逻辑。我会把它留给你 ;)
var w = 0;
var $window;
var $background;
function resize(e) {
var _w = $window.width();
if(w === _w) {
$background.width(_w);
}
w = _w;
}
$(document).ready(function() {
$window = $(window);
$background = $('#background');
$(window).resize(resize);
});html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#background {
height: auto;
position: fixed;
background-repeat: no-repeat;
}
.login-drawer {
position: absolute;
top: 0; right: 0; bottom: 0; left: 70%;
background: white;
}<html>
<head></head>
<body>
<img src="https://secure.aadcdn.microsoftonline-p.com/dbd5a2dd-6ybrougjmflxqw910ieyohr7wb4x4-yvoixrlaidmz4/appbranding/zeybopfwkgpwmcplgyvdjsbnpiq-j2ebveynzrvraxa/0/heroillustration?ts=635848522936289301" id="background" alt="" />
<div class="login-drawer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>关于jquery - 当浏览器窗口调整大小时，背景图像被覆盖而不是调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34138335/