Question

以下是代码：

.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%;
}

top元素不保留background-size属性，该属性声明背景的高度等于元素的高度。

底部元素是相同的，除了它没有background-attachment：fixed rule。

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

Answer 1

具有元素大小但固定在屏幕上的元素的背景可以使用“position：fixed”的伪元素进行模拟。但问题是要使元素剪切这个伪元素，因为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;
}

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

Answer 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以完全匹配盒子。

Answer 3

如果您希望减少，

只需在.fixed样式

下更改1行

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

这将解决问题。

并删除此行

background-attachment: fixed;

这是问题

这样就可以了，

我在这里更新了fiddle

注意：如果您希望图片保持固定尺寸且div应该减少，那么就有不同的方法。

定义背景大小

background-size: auto 250px;

我也更新了fiddle ..

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

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

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

3 个答案: