CSS -背景附件:固定不停止滚动(tumblr主题)



我正在为tumblr主题做一些编码,并遇到这个问题:"background attachment: fixed"不会阻止背景图像上下滚动;它仍然会随着内容移动

HTML

<div id="content">
    <div id="posts">
        posts...
    </div>
</div>
CSS

#content {
    background-image: url('{image:Background Image}');
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: auto;
    width: calc(100% - 300px);
    float: right;
}

宽度也不起作用,但我被告知这就是固定的工作原理,我只是想修复这个事实,即图像仍然移动

有时主题的css文件可以覆盖您的自定义编辑。尝试将!important放置在background-fixed属性中,如下所示:

 background-attachment: fixed !important;

还没有发现为什么不工作,但我已经发现了一个替代方案:

为背景创建一个单独的图像,并将其放置在img标签的内容上方…

<img id="image" src="source" />
<div id="content"></div>

…然后使用这个方便的CSS布局,使图像出现在

内容的下方CSS

#image {
    height: 100%;
    width: 100%;
    position: fixed; //to prevent scrolling
    z-index: -1; //sets z-index, which wasn't working in my previous setup
}
#content {
    background: transparent;
    position: absolute;
    z-index: 1;
}

JSFiddle: http://jsfiddle.net/Minecraft_Percabeth/ah6qkj8e/

最新更新