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以及许多其他人正在将其用于可缩放的背景图像。

Answer 2

您是否正在尝试填充元素，因此不介意背景图像在高度或宽度上根据比例在元素外部缩放？如果是，请尝试： background-size：cover;

Answer 3

基础+ 非画布 + chrome + background-attachment：fixed =问题。或者我听说过......

http://foundation.zurb.com/forum/posts/1799-an-off-canvas-story “1-仅适用于Windows的Chrome（或者互联网上说的）：背景附件：固定的动作与动画很奇怪。特别是如果你围绕所有固定的背部包裹一个自动动画的扫描。注意：这与Zurb无关，但与chrome有关。“

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

3 个答案: