7

我正在使用 css 提示和技巧中的这段代码来覆盖背景图像。问题在于它会重新缩放图像以适应宽度和高度并改变纵横比。我希望背景图像重新缩放到全屏宽度，然后仅裁剪高度（从图像顶部开始，而不是中心）以覆盖视口。这样，图像纵横比将保持不变。

我遇到的第二个问题是，除非我对图像使用 FQDN 而不仅仅是下面的 url，否则它似乎不起作用。

html {
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
4

3 回答 3

13

代替

background-size: cover;

你会想要使用

background-size: 100% auto;

Cover 会将图像拉伸到最小尺寸，使其宽度和高度都可以适合内容区域，因此是您的问题。在这里查看更多信息。

于 2012-06-27T03:38:16.260 回答
2

使用时图像纵横比不会改变cover。但是，我相信您想要修复图像的底部，因为您告诉过您希望从顶部而不是中心裁剪它，我认为您不想从顶部和底部说。

如果您想将底部保持在底部，（也许是一片可以避免大天空的草原？）那么您需要将位置更改为center bottomfrom center center。

如果您按照 Nit 的建议将其设为 100% 自动，那么，在 html 元素的高度/宽度比大于图像的窗口上，您将在顶部看到空白区域，这可能是您想要的，尤其是在您是使用在顶部淡入相同颜色的图像...

对于您的第二个问题，它不是 fqdn，而是您的路径的相对/绝对引用。根据您的 css，您的 css 文件所在的图像文件夹中应该有一个 bg.jpg。

index.html
main.css
images/
    bg.jpg
于 2012-06-27T03:53:19.947 回答
0

我会为此使用 JS。CSS 似乎还不能很好地处理纵横比。

尝试这样的事情：

首先，创建一个 div 并在其中放置一个图像

<div class="big-image">
   <img src="path.jpg" width="1000" height="1000" alt="whatever">
</div>

然后在您的 CSS 中执行此操作：

.featuredImage img {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
}
/* this class will be added via JS */
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

最后，你的 JS

  var theWindow = $(window),
  $bg = $(".big-image img"), // Use your image selector here.
  aspectRatio = $bg.width() / $bg.height();

  $bg.removeAttr('width');
  $bg.removeAttr('height');

  function resizeBg() {
    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
      $bg
        .removeClass()
        .addClass('bgheight');
    } else {
      $bg
        .removeClass()
        .addClass('bgwidth');
    }
  }
  theWindow.resize(function() {
    resizeBg();
  }).trigger("resize");

让我知道这是否有意义。不仅仅是我知道的 CSS，而是一个解决方案

于 2012-06-27T03:46:29.300 回答