0

我试图找出使背景图像完全响应的最佳方法 - 到目前为止，我能想到的最好方法是使用 background-size: 覆盖，正如大多数人倾向于建议的那样，但使​​用background-attachment: fixed以便图像在屏幕调整大小时缩小其比例，否则它只会保留其原始比例并且根本不缩放。仅使用 background-size:cover 拉伸图像以填充容器 div，但不会自动缩放比例..

但是，我不希望在您向下滚动时隐藏部分图像的固定背景的效果，并且希望它是背景附件：滚动，但我无法让它工作并使其也可以缩放。

所以我的问题是：有什么我不知道的方法可以让背景图像随屏幕大小自动缩放，而无需使用 background-attachment: fixed 来实现它？

请查看我的 JSFiddle，了解我目前所拥有的：https ://jsfiddle.net/uhoL5d5w/2/

（是的，我也知道在某些时候我需要使用媒体查询来为各种屏幕尺寸提供优化的图像）

我当前的代码如下所示：

<header>
    <div class="launch-bg">
        <nav class="menu">
        </nav>
    </div>
</header>

<div class="page-wrapper">

</div>


<div class="push"></div>

<!-- Footer -->

<div class="footer"></div>


html,
body {
  @include box-sizing(border-box);
  height: 100%;
}

div,
body {
  margin: 0;
  padding: 0;
}

body {
  display: block;
  background-color: #000000;
}

.page-wrapper {
  margin: 0 auto -900;
  min-height: 100%;
  height: auto;
}


* {
  margin: 0;
  padding: 0;
}


header {
  display: block;
  width: 100%;
  height: 1200px;
}

  .launch-bg {
    height: 1200px;
    background-image: url('http://s8.postimg.org/56xlj2rc5/launch_bg.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
  }

.footer {
  height: 900px;
  padding: 6% 0;
  color: $white;
  background-image: url('http://s8.postimg.org/onib5lmg5/footer_bg.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}
4

1 回答 1

0

这是一个简单的例子，我认为，你所要求的，只是为了清楚起见，把它全部剪掉：

header {
  display: block;
  width: 100%;
  height: 1200px;
  background-image: url('http://s8.postimg.org/56xlj2rc5/launch_bg.jpg');
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}
于 2015-06-17T00:28:47.360 回答