CSS:固定背景附件不会缩放到元素边界

Question

我以前从未遇到过我似乎无法弄清楚的 CSS 问题，但我只是对这个问题感到困惑。我有一个元素，我想在其中有一个固定的背景图像，我故意使用比该元素大很多的图像，因为我没有为这个特定元素使用媒体查询，而只是想要使图像缩放到元素宽度。然而，出于某种原因，当我将背景附件切换为固定时，图像使用父元素的边界作为引用点。

我正在使用 Foundation 4 框架(我一直在使用它)，因此父元素是一个 row 类，所以值得注意，但我无法弄清楚那可能会导致这个问题。这是我正在使用的样式定义(我已经将背景声明分开以进行故障排除)。有想法吗？

#page-content {
  min-height: $publicContentHeight;
  background-color:rgba(255,255,255,0.25);
  background-image: url('../img/paper_phren/pages.bg.fludd.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size:contain;
  background-attachment: fixed;
  box-shadow:0px -5px 10px rgba(0,0,0,.3);
}

Answer 1

如果没有看到您的用例很难说，但我发现 background-size 不能很好地缩放图像以适应任何屏幕尺寸的宽度而不会溢出它的容器。大多数人所做的，也是我现在采用的，只是为背景使用 img 元素。是的，它在语义上不那么准确，但是您获得的控制是不值得的。 Microsoft.com 和许多其他公司正在使用它来制作可缩放的背景图像。