1

这是一个例子：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 中对其进行了测试。如果是这样，有没有办法更新背景的大小？

4

3 回答 3

2

具有元素大小但在屏幕上固定的元素的背景可以用具有“位置：固定”的伪元素来模拟。但接下来的问题是让元素剪辑这个伪元素，因为overflow不影响位置固定的子元素。我知道的唯一解决方法（在这篇俄语博客文章中找到）是使用 CSSclip属性（需要绝对定位的包装器）。

JSFiddle 示例

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 的解决方案可能更合适。

于 2013-08-27T19:55:21.920 回答
1

如果你想减少它，

只需更改 1 行，在.fixed样式下

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

这将固定位置。

并删除此行

background-attachment: fixed;

这是问题

这会成功的，

在这里我更新了fiddle

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

定义背景大小，

background-size: auto 250px;

我也为此更新fiddle了..

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

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

于 2013-09-02T07:24:21.307 回答
1

如果您对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 才能完美匹配盒子。

于 2013-08-27T16:48:47.030 回答