Question

我希望能够拥有一个不会在浏览器窗口时调整大小的背景，而是看起来它正在滑动其内容背后的背景。 http://portal.office.com是我想要获得的外观的完美示例。我不确定这个效果甚至被调用，所以我甚至不知道在哪里看，或者是否主要用jQuery或CSS完成。任何指针都将非常感激。谢谢。

修改

正如斯蒂芬所指出的那样，background-size: cover很接近，但是当窗口调整大小时，它只会切断浏览器边缘的图像，而不会被其他内容切断背景。

Answer 1

Microsoft网站使用js来调整图像大小。当您垂直调整浏览器而不是水平调整浏览器时，它似乎只是调整大小。需要修复图像才能使图像正常工作。

你可以做背景大小：封面，但它会继续调整大小。您还可以使用媒体查询来停止调整图像大小并将背景大小更改为自动并使用媒体查询。

像Aeolingamenfel这样的另一个选择是设置最大宽度。

这应该会给你一个良好的开端，但它需要更多的逻辑。我会把它留给你;）

＆＃13;

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);
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

http://codepen.io/anon/pen/YwPGrM

Answer 2

看起来微软在该页面上所做的是设置某种背景，然后让实际的内容div只占用页面右侧的固定宽度。

<强> HTML

<div class="Content">
    [your content goes here]
</div>

<强> CSS

body
{
  background: /* your image goes here */;
  background-size: cover; /* makes sure image covers background, can be changed */
  padding: 0;
  margin: 0;
}

.Content
{
  width: 100%;
  max-width: 300px;
  min-height: 100vh;
  margin: 0 0 0 auto; /* stay on right side if there is extra space */
  background: #fff;
}

width: 100%和max-width: 300px表示在屏幕尺寸大于300像素的情况下，内容只占用300px的空间，并为图像留出空间，但低于此值，将会占用全宽。

我还设置了min-height: 100vh，这样即使您没有很多内容，您的内容也会填满整个页面右侧。

示例

如果你想看一个例子，我把它放在jsFiddle上。

背景图像覆盖而不是在浏览器窗口调整大小时调整大小

2 个答案: