css - CSS - 背景附件：固定不停止滚动（tumblr 主题）

Question

我正在为 tumblr 主题进行一些编码并遇到了这个问题：“背景附件：固定”不会阻止背景图像上下滚动；它仍然随着内容移动。

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

宽度也不起作用，但有人告诉我这就是固定的工作方式，我只是想解决图像仍然移动的事实。

Answer 1

仍然没有发现为什么它不起作用，但我发现了一个替代方案：

为背景创建一个单独的图像并将其放在 img 标记中的内容上方...

HTML

<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/

Answer 2

有时主题的 css 文件可以覆盖您的自定义编辑。尝试像这样放置!important属性background-fixed：

 background-attachment: fixed !important;