背景图像的大小未在背景附件上更新：固定元素答案

【问题标题】：Size of the background image not updating on background-attachment: fixed elements背景图像的大小未在背景附件上更新：固定元素
【发布时间】：2013-08-22 22:33:33
【问题描述】：

这里是一个例子：http://jsfiddle.net/MyDkR/8/

代码如下：

.fixed {
    height: 250px;
    width: 250px;
    background: #000 url('http://placekitten.com/200/600') no-repeat;
    background-size: auto 100%;
    background-attachment: fixed;
}

.notfixed {
    height: 250px;
    width: 250px;
    background: #000 url('http://placekitten.com/200/600') no-repeat;
    background-size: auto 100%;
}

顶部元素不保留 background-size 属性，它声明背景的高度将等于元素的高度。

底部元素是相同的，只是它没有 background-attachment: fixed 规则。

这是渲染错误吗？我已经在最新版本的 IE 和 Chrome 中对其进行了测试。如果是这样，有没有办法更新背景的大小？

【问题讨论】：

如果我正确理解MDN:background-size 的部分，这是正确的行为：If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present. Negative percentages are not allowed. 这个问题可能会有所帮助：stackoverflow.com/q/15713668/1960455
@t.niese 发布作为答案。要查看效果，您可以调整窗口大小，其行为与定义的行为完全相同。还要注意调整背景大小以获得完整答案的可能方法
^^ 如果您将background-attachment: fixed 移动/添加到.notfixed 元素，您将看到类似的行为。更好地理解这些行为的一个好方法是在不同的组合中尝试它们，看看它们做了什么，然后返回并重新阅读规范和/或 MDN 文档 - 然后不断重复。
@Zeaklous 我有点没时间了（无法做出包括解决方案在内的完整答案）。所以我只是将它添加为评论，以便它至少得到部分回答。
@t.niese 希望大家等到你发帖，因为这是唯一正确的答案

标签： html css

【解决方案1】：

具有元素大小但在屏幕上固定的元素的背景，可以用具有“位置：固定”的伪元素来模拟。但是接下来的问题是让元素裁剪这个伪元素，因为overflow 不会影响位置固定的子元素。我知道的唯一解决方法（找到 in this Russian blog article）是使用 CSS clip 属性（需要绝对定位的包装器）。

JSFiddle example

HTML：

<div class="fixed"><div></div></div>

CSS：

.fixed {
    height: 250px;
    width: 250px;
    position: relative;
}

.fixed > div {
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    clip: rect(0px, 250px, 250px, 0px);
}

.fixed > div::before {
    content: '';
    position: fixed;
    height: inherit;
    width: inherit;
    background: #000 url('http://placekitten.com/200/600') no-repeat;
    background-size: auto 100%;
    z-index: -1;
}

缺点是需要以长度单位（不是百分比）设置clip 的值，如果元素的高度应该是真正动态的，这可能会出现问题。在这种情况下，Henrique Feijo 的解决方案可能更合适。

【讨论】：

【解决方案2】：

如果你对javascript版本感兴趣，可以试试：

$(document).ready(function(){
    $('#smaller').click(function(){
        var oldHeight = $('.fixed').height();

        $('.fixed, .notfixed').css('height', oldHeight/1.25 +'px');
        $('.fixed').css("background-size", "auto " + $('.fixed').height() + "px")
    });
});

当您单击它时，它会调整背景大小。也许你需要在高度上增加大约 10px 才能完美匹配盒子。

【讨论】：

【解决方案3】：

如果你想让它减少，

只需要改1行，.fixed样式下

background: #000 url('http://placekitten.com/200/600') no-repeat 0 0;

这将固定位置。

并删除此行

background-attachment: fixed;

这是个问题

这样就可以了，

这里我更新了fiddle

注意：如果您正在寻找图像保持固定大小并且div应该减小，那么有不同的方法。

定义背景大小，

background-size: auto 250px;

我也为此更新了fiddle..

静态关键字是在页面缩放更改或滚动发生时使图像静态到该位置。所以图像会留在那个地方。

我希望这会让事情变得清晰。

【讨论】：