我从未遇到过似乎无法弄清的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);
}
最佳答案
在没有看到用例的情况下很难说,但是我发现background-size
对于缩放图像以适合任何屏幕尺寸的宽度而不溢出容器的效果不佳。大部分操作以及我现在采用的操作只是在背景中使用img
元素。是的,它在语义上不那么准确,但是您获得的控制是不值得的。 Microsoft.com以及许多其他公司正在将其用于可伸缩的背景图像。