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

【问题标题】：CSS - background-attachment:fixed not stopping scroll (tumblr theme)CSS - 背景附件：固定不停止滚动（tumblr 主题）
【发布时间】：2015-09-28 00:36:54
【问题描述】：

我正在为一个 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;
}

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

【问题讨论】：

标签： css tumblr background-attachment

【解决方案1】：

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

 background-attachment: fixed !important;

【讨论】：

对不起，没用 :/ 属性确实改变了代码，改变了它的外观，所以它影响了页面，只是不在我期望并喜欢它的方式。

【解决方案2】：

仍然没有发现为什么它不起作用，但我发现了另一种选择：

为背景创建一个单独的图像，并将其放在 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/

【讨论】：

除非有人找到真正问题的解决方案，否则我会将其标记为“正确”，因为这种替代方案总比没有好。
你应该把它放在一个 jsfiddle 中，因为这里没有 tumblr 特定的代码（它只是 html 和 css）。我认为您可能还想使用更多的属性。例如，如果项目以正确的顺序堆叠，则不一定需要使用 z-index。
:P 谢谢，您对 z-index 的看法是正确的！我不知道为什么，但昨天似乎我需要它。
编辑 1：使用 background-image 属性始终在屏幕中显示图像而不滚动（我不推荐根据类名设置 img 元素的样式。jsfiddle.net/lharby/ah6qkj8e/1）跨度>
编辑 2：根本不要使用 image 属性，使用 div （或 span）和使用 background-image 属性的样式。我认为这是一个更好的方法。如果这对您有帮助，请告诉我，我可以将其写成完整的答案，jsfiddle.net/lharby/ah6qkj8e/2